AngularJS学习总结

时间 2019-11-20

原文原文链接

在8月份一个项目机会下，决定真正完整地学习使用AngularJS 1.3，下面是我一些总结。html

PS：有些人很抵触AngularJS这种框架，认为它是在办坏事，装高调，我是认为任何能普遍传播的框架存在不是没有缘由，总会有它适用的场景，真正使用了才能发觉东西好坏。前端

什么是AngularJSjquery

首先AngularJS是一个框架，框架与函数库的区别就在于，框架决定整个项目的开发套路，以框架为主导，函数库倒是以项目自己为主导，例如jquery。它就是个双向数据绑定的前端JS框架，双向数据绑定是相比较于其余框架最特别的地方，其余特性都是围绕它工做的。它适用于CRUD应用（增长(Create)、读取(Retrieve)、更新(Update)和删除(Delete)）。app

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