标签：
?
1.引导程序
?
使用ng-app开始引导一个程序：标记了AngularJS应用的作用域
<!doctype html>
<html
lang="en"
ng-app>
双括号绑定表达式：
<p>Nothing here {{‘yet‘ + ‘!‘}}</p>
?
2.视图和模板
?
其核心为MVC模式
原理：在AngularJS中，一个视图是模型通过HTML模板渲染之后的映射
?
HTML模板：
包含ng-controller指令，和ng-repeat指令
<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>
ng-repeat的语法：对象变量 in 对象数组
?
模型和控制器：
$scope是作用域，为根作用域的一个后继，这里使用的是按照名称的DI。
phones即模型。
function PhoneListCtrl($scope) {
??$scope.phones = [
????{"name": "Nexus S",
?????"snippet": "Fast just got faster with Nexus S."},
????{"name": "Motorola XOOM? with Wi-Fi",
?????"snippet": "The Next, Next Generation tablet."},
????{"name": "MOTOROLA XOOM?",
?????"snippet": "The Next, Next Generation tablet."}
??];
}
?
AngularJS的作用域理论非常重要：
- 一个作用域可以视作模板、模型和控制器协同工作的粘接器。
- AngularJS使用作用域，同时还有模板中的信息，数据模型和控制器。
- 这些可以帮助模型和视图分离，但是他们两者确实是同步的！（绑定）任何对于模型的更改都会即时反映在视图上；任何在视图上的更改都会被立刻体现在模型中。
?
3.过滤器
?
页面上的条件过滤：
Search: <input ng-model="query">
?
<ul
class="phones">
????????<li
ng-repeat="phone in phones | filter:query">
??????????{{phone.name}}
????????<p>{{phone.snippet}}</p>
????????</li>
</ul>
?
解释：
?
4.双向绑定
?
使用orderProp来作为一个模型绑定，其值被应用到过滤器之后用作排序
orderBy:orderProp：按照orderProp选择的属性来排序。
<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>
?
初始化：
$scope.orderProp = ‘age‘;
?
5. XHR和依赖注入
?
DI：$开头的，一系列的对象。如：$scope, $http。
function PhoneListCtrl($scope, $http) {
??$http.get(‘phones/phones.json‘).success(function(data) {
????$scope.phones = data;
??});
?
??$scope.orderProp = ‘age‘;
}
?
避免压缩的DI：
PhoneListCtrl.$inject = [‘$scope‘, ‘$http‘];
?
另外一种方法：
var PhoneListCtrl = [‘$scope‘, ‘$http‘, function($scope, $http) { /* constructor body */ }];
?
6.链接
?
<img ng-src="{{phone.imageUrl}}">
?
7.路由和多视图
?
Angular JS笔记
标签：
原文地址：http://www.cnblogs.com/pengzhen/p/4832398.html
