先看看游戏规则
<html> <head> <script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script> </head> <body ng-app="ezstuff"> <ez-clock></ez-clock> </body> </html>
angular.module("ezstuff",[]) .directive("ezClock",function(){ return { restrict : "E", template : "<div></div>", link : function(scope,element,attrs){ setInterval(function(){ var d = new Date(); element.text(d.toString()); },1000); } } })
具体玩家分类
AngularJS最大的卖点是用静态的HTML文档,就可以定义具有动态行为的页面。
还是前面的小时钟示例,我们使用AngularJS模板来重写,示例已经嵌入在编辑器中→_→:
先看HTML文件。请使用鼠标轻击右边编辑器的HTML按钮,切换到HTML编辑器。
HTML文件看起来像普通的HTML,只是其中多了一些特别的标记(比如:ng-app,ez-clock等等)。 在Angular中,这个HTML文件被称为模板。
第一种特别的标记我们称之为指令。指令可以为HTML元素添加额外的行为(让HTML 动起来)。在这个例子中,我们使用了一个ng-app指令,这个指令用来通知Angular自动 引导应用(晚点会解释这个“引导”);我们还使用了一个自定义的ez-clock指令, 这个指令是我们自己实现的,用来产生那个小时钟。
再切换到JavaScript编辑器查看一下JavaScript代码。
JavaScript代码就是ez-clock指令的实现,我们先不深究它的写法,但请注意下,在代码中 真正干活的是setInterval(...)那个调用。
当Angular启动应用时,它会通过一个编译器解析、处理这个模板文件,生成的结果就是:视图。
运行一下,你会看到和前面章节同样的时钟:
累是一样累收获不一样
我们在模板中指定了一个自定义的标签ez-clock,而它变成了一个会动的时钟。 这中间发生了什么?
浏览器不会理解ez-clock这个标签,是脚本做了这个工作。
angular.min.js引入了基本的angularJS框架,它会在浏览器载入HTML文档并且 建立好DOM树后,执行以下操作:
- 找到有ng-app属性的DOM节点
- 以这个节点为根节点,重新解释DOM树,具体说就是子树
- 在解释过程中,发现ez-clock这个指令
- 调用ez-clock指令的实现进行展开
ez-clock的展开操作如下:
- 使用一个div元素替换这个自定义标签
- 创建一个定时器,在定时器触发时刷新div元素的innerText
ez-clock这个自定义的标签,在AngularJS中北称为指令/directive,意思是 看到这个指令,AngularJS基础框架需要对其进行解释,以便展开成浏览器可以理解 的东西(HTML元素和脚本),而这个解释的过程,有一个特定的名称:编译。
可见,要写的代码一点也不会少,只是,代码被一种新的方式重新组织了。
有什么亮点让你这么痴迷
答案是在开发过程中,便于分工与代码复用。
在小的项目中也可以应用AngularJS,这样你可以得到思维的锻炼。但是真正发生 威力,是在一个团队中,可以有专人负责实现指令(比如:ez-clock),其他人只需要 利用这些指令编写模板,这样的成本更低。
符合经济学原理,不是吗?
当然,从编写界面HTML模板的角度看,ez-clock比div更具有语义性,使模板更容易维护, 使指令的实现升级不影响模板,这也是不小的好处了。
指令算是新型的API,与我们所熟悉的对象、函数这类接口完全不同,它提供了在 静态化的HTML文件中,指定动态行为的能力。