angularjs

浏览数：32 / 时间：2015年06月09日

<html ng-app>
<head>
  ...
  <script src="lib/angular/angular.js"></script>
  <script src="js/controllers.js"></script>
</head>
<body ng-controller="PhoneListCtrl">

  <ul>
    <li ng-repeat="phone in phones">
      {{phone.name}}
    <p>{{phone.snippet}}</p>
    </li>
  </ul>
</body>
</html>

在<li>标签里面的ng-repeat="phone in phones"语句是一个AngularJS迭代器。这个迭代器告诉AngularJS用第一个<li>标签作为模板为列表中的每一部手机创建一个<li>元素。
包裹在phone.name和phone.snippet周围的花括号标识着数据绑定。和常量计算不同的是，这里的表达式实际上是我们应用的一个数据模型引用，这些我们在PhoneListCtrl控制器里面都设置好了
app/js/controller.js:
```
 1 function PhoneListCtrl($scope) {
 2   $scope.phones = [//这个scope表明是控制器的作用域，表示对作用域里的phones，其绑定的name和snippet属性填充
 3     {"name": "Nexus S",
 4      "snippet": "Fast just got faster with Nexus S."},
 5     {"name": "Motorola XOOM™ with Wi-Fi",
 6      "snippet": "The Next, Next Generation tablet."},
 7     {"name": "MOTOROLA XOOM™",
 8      "snippet": "The Next, Next Generation tablet."}
 9   ];
10 }
```
控制器通过给定我们数据模型的语境，控制器允许我们建立模型和视图之间的数据绑定。我们是这样把表现层，数据和逻辑部件联系在一起的：
- PhoneListCtrl——控制器方法的名字（在JS文件controllers.js中）和<body>标签里面的ngController指令的值相匹配。
- 手机的数据此时与注入到我们控制器函数的作用域（$scope）相关联。当应用启动之后，会有一个根作用域被创建出来，通过ng-app实现，而控制器的作用域是在根作用域里。这个控制器的作用域对所有<body ng-controller="PhoneListCtrl">标记内部的数据绑定有效。

AngularJS的作用域理论非常重要：一个作用域可以视作模板、模型和控制器协同工作的粘接器。AngularJS使用作用域，同时还有模板中的信息，数据模型和控制器。这些可以帮助模型和视图分离，但是他们两者确实是同步的！任何对于模型的更改都会即时反映在视图上；任何在视图上的更改都会被立刻体现在模型中。

迭代器过滤

 1 <div class="container-fluid">
 2   <div class="row-fluid">
 3     <div class="span2">
 4       <!--Sidebar content-->
 5 
 6       Search: <input ng-model="query">
 7 
 8     </div>
 9     <div class="span10">
10       <!--Body content-->
11 
12       <ul class="phones">
13         <li ng-repeat="phone in phones | filter:query">
14           {{phone.name}}
15         <p>{{phone.snippet}}</p>
16         </li>
17       </ul>
18 
19        </div>
20   </div>
21 </div>

<input>标签：

数据绑定：当页面加载的时候，AngularJS会根据输入框的属性值名字，将其与数据模型中相同名字的变量绑定在一起，以确保两者的同步性。

　　在这段代码中，用户在输入框中输入的数据名字称作query，会立刻作为列表迭代器（ng-repeat="phone in phones | filter:query)及其过滤器的输入。当数

　　据模型引起迭代器输入变化的时候，迭代器可以高效得更新DOM将数据模型最新的状态反映出来。

使用filter过滤器：filter函数使用query的值来创建一个只包含匹配query记录的新数组。

ngRepeat会根据filter过滤器生成的手机记录数据数组来自动更新视图。整个过程对于开发者来说都是透明的。

双向绑定

Search: <input ng-model="query">
Sort by:
<select ng-model="orderProp">
  <option value="name">Alphabetical</option>
  <option value="age">Newest</option>
</select>


<ul class="phones">
  <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
    {{phone.name}}
    <p>{{phone.snippet}}</p>
  </li>
</ul>

首先，我们增加了一个叫做orderProp的<select>标签，这样我们的用户就可以选择我们提供的两种排序方法。
在filter过滤器后面添加一个orderBy过滤器用其来处理进入迭代器的数据。orderBy过滤器以一个数组作为输入，复制一份副本，然后把副本重排序再输出到迭代器。
现在当你在下拉菜单中选择“Alphabetically”，数据模型会被同时更新，并且手机列表数组会被重新排序。这个时候数据绑定从另一个方向产生了作用——即数据从视图到模型的绑定。

xhr和依赖注入

依赖注入：在控制器中可以使用$http向web服务器发起一个$http请求，进而从相应的文件中获取数据。$http是angularJs众多内建服务之一，这些服务可以处理一些Web应用的通用操作。

AngularJS能将这些服务注入到任何你需要它们的地方。

服务是通过AngularJS的依赖注入DI子系统来管理的。依赖注入服务可以使你的Web应用良好构建（比如分离表现层、数据和控制三者的部件）并且松耦合（一个部件自己不需要解决部件之间的依赖问题，它们都被DI子系统所处理）。

为了使用AngularJS的服务，你只需要在控制器的构造函数里面作为参数声明出所需服务的名字

angularjs,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

angularjs