AngularJS学习总结
在8⽉份⼀个项⽬机会下，决定真正完整地学习使⽤AngularJS 1.3，下⾯是我⼀些总结。
PS：有些⼈很抵触AngularJS这种框架，认为它是在办坏事，装⾼调，我是认为任何能⼴泛传播的框架存在不是没有原因，总会有它适⽤的场景，真正使⽤了才能发觉东西好坏。
什么是AngularJS
⾸先AngularJS是⼀个框架，框架与函数库的区别就在于，框架决定整个项⽬的开发套路，以框架为主导，函数库却是以项⽬本⾝为主导，例如jquery。它就是个双向数据绑定的前端JS框架，双向数据绑定是相⽐较于其他框架最特别的地⽅，其他特性都是围绕它⼯作的。它适⽤于CRUD应⽤（增加(Create)、读取(Retrieve)、更新(Update)和删除(Delete)）。
PS：截图取⾃⼤漠穷秋，图例意思是当模板编译成视图，视图发⽣变化触发数据模型变化，数据模型⼜会作⽤于视图。
我时常想着⼀句话“当你知道⼀个⼯具的30%，你就能⽤它做70%的事”，所以学习⼀个框架的时候，不需要完完整整从头看到尾，当了解差不多了就可以开始⼲活。开始学习AngularJS，只需知道什么是双向数据绑定就⾏了，这是最关键、最需明⽩的。
写⼀个简单的⽰例如下。
HTML:
<!doctype html>
<html ng-app>
jquery学习在线教程<head>
<meta charset="utf-8">
<script src="angular.js"></script>
<script src="HelloAngular_bind.js"></script>
</head>
<body>
<div ng-controller="HelloAngular">
<p>x ：<input type="text" ng-model="x"/></p>
<p>y ：<input type="text" ng-model="y"/></p>
<p>x + y ：<span ng-bind="x*1+y*1"></span></p>
</div>
</body>
</html>
JS:
function HelloAngular($scope) {
$scope.x = 1;
$scope.y = 2;
}
PS：例⼦感受⼀下就⾏，没有必要深究，但应该对data与view的互相影响有些感觉。
AngularJS有什么
除了最重要的双向数据绑定，AngularJS有以下元件，其中Controller、Directive是最为重要的。
PS：截图取⾃⼤漠穷秋
在我的项⽬⾥，使⽤最多是Directive、Controller，了解这两个元件我觉得就差不多了，其他⽤到时再查就⾏。1. Module
作为模块组织者，包含其他AngularJS元件。
2. Controller
负责跟View沟通，不处理任何跟DOM有关的⼯作
PS：当你的Controller⾥⾯写了DOM操作时，就应该反省代码是否写得有问题了。
3. Directive
类似于HTML标签，可以定义标签的⾏为，所有与DOM相关的操作都应该写在这⾥。
PS：尽量不⽤DOM操作，但可能还是会需要⽤到，⽤到时就要在Directive⾥⽤。
4. Service
写可以独⽴运作的代码（与View⽆关），共⽤于元件（例如控制器）之间，不应该处理任何跟DOM有关的⼯作。
5. Filter
对数据做⼀些修理，不应该处理任何跟DOM有关的⼯作。
6. Config
⽤来定义路由规则，不应该处理任何跟DOM有关的⼯作。
上⾯是⼀些教程结合我⾃⼰的总结，最常强调注意⼀点是对DOM操作的地⽅。对于这些元件我没有举例⼦，贴代码没什么意思，如果想学习的，还是要⾃⼰去实践。
双向数据绑定
双向数据绑定是个重要的特性，值得我们搞明⽩他的原理。当View中有数据发⽣了变化，这个变化会反馈到Model的scope的数据上，⽽当scope数据发⽣变化时，View中的数据也会更新到最新的值。
三个⽅法
在说明原理前，有三个scope重要的⽅法需要解释，分别是$apply、$digest、$watch。
1. $watch
注册⼀个watcher，监听scope的数据，当数据变化时候调⽤回调函数。第⼀个参数是被监听的数据，第⼆个参数是回调函数。
$scope.$watch('xxx', function(newValue, oldValue) {
//update the DOM with newValue
});
2. $digest
检查scope中的数据是否发⽣了变化，如果变化则关联到该watcher的回调函数就会被执⾏。
3. $apply
这⽅法是调⽤$rootScope.$digest()，在$rootScope开始$digest，随后会访问到所有的children scope中的watchers。$apply()⽅法有两种形式。第⼀种会接受⼀个function作为参数，执⾏该function并且触
发⼀轮$digest循环。第⼆种会不接受任何参数，只是触发⼀轮$digest循环。
PS：AngularJS并不直接调⽤$digest()，⽽是调⽤$scope.$apply()
原理
当在HTML写下表达式如{{name}}或ng-model="name"时，AngularJS在幕后会为你在scope模型上设置⼀个watcher，如下：
$scope.$watch('name', function(newValue, oldValue) {
//update the DOM with newValue
});
当页⾯JS事件触发时，AngularJS会监视到并更改scope数据，并⾃动触发⼀轮$digest循环，每个关联的watcher的回调函数被执⾏，最后View被更新。
注意地⽅
1. 有的时候你发现明明scope的数据已经改了，但你发现View并没有更新。
这是因为你可能在setTimeout、异步请求等⾥去修改数据，但此时AngularJS并不知道数据已经变了，不会帮你调⽤digest循环，所以你需要⼿动调⽤$apply。⽬前⼀些指令（例ng-click、ng-model）以及服务（例$timeout、$http）被调⽤时会⾃动触发⼀次$digest循环，这些就不⽤⼿动调$apply。
setTimeout(function() {
$scope.$apply(function() {
//wrapped this within $apply
$scope.name= 'lu';
});
}, 2000);
或
setTimeout(function() {
$scope.name= 'lu';
$scope.$apply();
}, 2000);
2. 脏检查(Dirty Checking)
当⼀个$digest循环运⾏时，watchers会被执⾏来检查scope中的models是否发⽣了变化。如果发⽣了变化，那么相应的listener函数就会被执⾏。在当前的⼀次循环结束后，它会再执⾏⼀次循环⽤来检查是否有models发⽣了变化。这就是脏检查(Dirty Checking)，它⽤来处理在listener函数被执⾏时可能引
起的model变化。因此，$digest循环会持续运⾏直到model不再发⽣变化，或者$digest循环的次数达到了10次。（这段解析来⾃其他⽂章）
PS：$digest循环最少也会运⾏两次，即使在listener函数中并没有改变任何model
3. 监控的表达式不要过于复杂，表达式数量不要太多
4. 监听函数内不要有DOM操作，那样会显著降低性能
5. 不能互相监听对⽅会修改的属性，以免形成交叉引⽤
⼀些好的视频教程
1. AngularJS初级⼊门教程（外国⼈的，讲得简单易懂）
2. AngularJS重要的開發觀念與經驗分享
3. ⽤AngularJS开发下⼀代WEB应⽤（⼤漠穷秋）
PS: (点击下载)
总结
这篇⽂章我⼀直在说双向数据绑定的东西，⽽那些依赖注⼊、路由、Service等我并没涉及，是因为我觉得前者是最重要的，能讲明⽩这⼀点已经够了。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论