你的位置:首页 > Java教程

[Java教程]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应用(大漠穷秋)

 
总结

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