从基础开始学习angular

• angular通过指令扩展HTML，通过表达式绑定数据到HTML

指令：（angular相对于HTML扩展的属性，带有前缀ng-）

ng-app指定一个angular应用程序（表明div是angular应用程序的所有者）指定了angular的根元素，会在网页加载完成后自动初始化应用程序。

ng-model指令把元素值绑定到应用程序

ng-bind指定把应用程序数据绑定到HTML视图

ng-init  指令初始化angular程序变量（少见）

ng-repreat重复一个HTML元素（类似map函数）

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">

  <p>使用 ng-repeat 来循环数组</p>

  <ul>

    <li ng-repeat="x in names">

      {{ x }}

    </li>

  </ul>

<div>

ng-options创建选择框。

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedName" ng-options="x for x in names">
</select>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Google", "W3Cschool", "Taobao"];
});
</script>

ng-click指令，定义了一个单击事件。

表达式：（在作用上跟ng-bind是一样的）

写在双大括号中{{}}

把数据绑定在HTML，跟ng-bind有相似之处

angular在表达式书写的位置输出数据

<div ng-app="" ng-init="quantity=1;cost=5">

<p>总价： {{ quantity * cost }}</p>

</div>

等价

<div ng-app="" ng-init="quantity=1;cost=5">

<p>总价： <span ng-bind="quantity * cost"></span></p>

</div>

作用域：

scope是在HTML和JavaScript之间的纽带。（视图和控制器）

scope 是一个对象，有可以使用的方法和属性。

scope 可以应用在视图和控制器上。

< div   ng-app= "myApp"   ng-controller= "myCtrl" >

< h1 > {{carname}} < /h1 >

< /div >

< script >

var  app = angular.module( 'myApp' , []);

app.controller( 'myCtrl' ,  function ($scope) {

    $scope.carname =  "Volvo" ;

});

< /script >

页面比较复杂的时候，DOM有多个作用域

• View(视图), 即 HTML。
• Model(模型), 当前视图中可用的数据。
• Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。

$rootScope根作用域，可以作用在ng-app指令包含的所有HTML元素中。

$rootScope   可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

---

控制器：

ng-controller="myCtrl"是一个angular的指令，用于定义一个控制器。

比较难理解的是外部文件的控制器。

<div ng-app="myApp" ng-controller="personController">

名： <input type="text" ng-model="person.firstName"><br>
姓： <input type="text" ng-model="person.lastName"><br>
<br>
姓名： {{person.firstName + " " + person.lastName}}

</div>

<script src="Controller.js"></script>

另外的Controller.js文件

angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
}); 

ng-controller指令定义了应用程序控制器。

过滤器：（多用来转换数据）

符号  “   |  ”

<div ng-app="myApp" ng-controller="personCtrl">

<p>姓名为 {{ lastName | uppercase }}</p>

</div>

服务：（创建自己的服务 Service）

$location服务，可以放回当前页面的URL地址。

$http服务，服务向服务器发送请求，应用响应服务器传送来的数据。

（$http.get('/index.php')）

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm").then(function (response) {
        $scope.myWelcome = response.data;
    });
});

获取接口数据

$timeout服务（相当于window.setTimeout函数）

$interval 服务 （相当于window.setInterval函数）

创建自己的服务

app.service('ser', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});

这样就创建了一个ser的服务。然后再去使用它

app.filter('myFormat',['ser
', function(ser) {
    return function(x) {
        return ser.myFunc(x);
    };
}]);

依赖注入：

一种软件设计模式，一个或者更多的依赖或者服务被注入（或者通过引用传递）到一个独立的对象，然后成为了客户端的一部分。

五个核心组件作为依赖注入（value,factory,service,provider,constant）

factory是一个函数用于返回值，在service和controller需要时创建。

路由：

module.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/',{template:'这是首页页面'})
        .when('/computers',{template:'这是电脑分类页面'})
        .when('/printers',{template:'这是打印机页面'})
        .otherwise({redirectTo:'/'});
}]);

参数说明：

• template:

  如果我们只需要在 ng-view 中插入简单的 HTML 内容，则使用该参数：

  .when('/computers',{template:'这是电脑分类页面'})

• templateUrl:

  如果我们只需要在 ng-view 中插入 HTML 模板文件，则使用该参数：

  $routeProvider.when('/computers', {
      templateUrl: 'views/computers.html',
  });
  

  以上代码会从服务端获取 views/computers.html 文件内容插入到 ng-view 中。

• controller:

  function、string或数组类型，在当前模板上执行的controller函数，生成新的scope。

• controllerAs:

  string类型，为controller指定别名。

• redirectTo:

  重定向的地址。

• resolve:

  指定当前controller所依赖的其他模块。

路由和依赖注入，楼主自己也不是很理解，只能先整理出啦，后面慢慢学习。

希望共同学习，多多指点~