声明式界面开发小时钟--进阶阶段
先看看游戏规则
<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文件中，指定动态行为的能力。
