标签：style blog http color 使用 strong
<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控制器里面都设置好了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>标签：
在这段代码中，用户在输入框中输入的数据名字称作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过滤器以一个数组作为输入，复制一份副本，然后把副本重排序再输出到迭代器。xhr和依赖注入
依赖注入：在控制器中可以使用$http向web服务器发起一个$http请求，进而从相应的文件中获取数据。$http是angularJs众多内建服务之一，这些服务可以处理一些Web应用的通用操作。
AngularJS能将这些服务注入到任何你需要它们的地方。
服务是通过AngularJS的依赖注入DI子系统来管理的。依赖注入服务可以使你的Web应用良好构建（比如分离表现层、数据和控制三者的部件）并且松耦合（一个部件自己不需要解决部件之间的依赖问题，它们都被DI子系统所处理）。
为了使用AngularJS的服务，你只需要在控制器的构造函数里面作为参数声明出所需服务的名字
标签：style blog http color 使用 strong
原文地址：http://www.cnblogs.com/youngyaya/p/3835598.html
