AngularJS学习总结_PHP中文网手记

摘要：什么是AngularJS 首先AngularJS是一个框架，框架与函数库的区别就在于，框架决定整个项目的开发套路，以框架为主导，函数库却是以项目本身为主导，例如jquery。它就是个双向数据绑定的前端JS框架，双向数据绑定是相比较于其他框架最特别的地方，其他特性都是围绕它工作的。它适用于CRUD应用（增加(Create)、读取(Retrieve)、更新(Upd

什么是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是最为重要的。

在我的项目里，使用最多是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. 不能互相监听对方会修改的属性，以免形成交叉引用

总结

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

AngularJS学习总结

热门词条