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>
<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: helloworld代码 (点击下载)
 
总结

这篇文章我一直在说双向数据绑定的东西，而那些依赖注入、路由、Service等我并没涉及，是因为我觉得前者是最重要的，能讲明白这一点已经够了。

 

本文为原创文章，转载请保留原出处，方便溯源，如有错误地方，谢谢指正。
本文地址 ：http://www.cnblogs.com/lovesong/p/4870006.html

posted @ 2015-10-11 20:53  海角在眼前  阅读(4258)  评论(8)  编辑  收藏  举报