首页 > 代码库 > angularjs
angularjs
<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的服务，你只需要在控制器的构造函数里面作为参数声明出所需服务的名字