这里有新鲜出炉的 AngularJS Tutorial 中文版,程序狗速度看过来!
AngularJS 诞生于 Google 是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。
本文主要介绍 AngularJs html compiler 的知识讲解,这里整理了相关资料及相关示例代码,有兴趣的小伙伴可以参考下
原文再续,书接上回。。。依旧参考 http://code.angularjs.org/1.0.2/docs/guide/compiler
一、总括
Angular 的 HTML compiler 允许开发者自定义新的 HTML 语法。compiler 允许我们对任意 HTML 元素或属性,甚至是新的 HTML 标签、属性(如 <beautiful girl="cf"></beautiful>)附加行为。Angular 将这些附加行为称为 directives。
HTML 有很多专门格式化静态文档的预定义 HTML 样式结构(可以告诉浏览器如何显示标记的内容)。假设某东东需要被居中,而我们不需要教浏览器如何去做(此处省略 N 字)。我们只需要简单地对需要居中的标签加入 align="center" 即可。这就是声明式语言(declarative language)的牛 X 之处。
但是声明式语言也有它的局限性,即你不能告诉浏览器如何处理在预定义范围外的语法。例如,我们不能很简单地告诉浏览器如何让文本在浏览器的 1/3 处对齐。所以,我们正需要一个让浏览器与时俱进,学学新语法的途径。
Angular 预先绑定了一些对构建应用有帮助的 directives。我们也可以自己创建属于自己应用的独特的 directives。这些 directive 扩展将成为我们自己的应用的 "特定领域语言"(Domain Specific Language)。
这些编译将仅仅发生在浏览器端,无须服务端或者预编译步骤。
二、Compiler
Compiler 作为 Angular 的一个服务(Service),负责遍历 DOM 结构,寻找属性。编译过程分成两个阶段:
1. 编译(Compile):遍历 DOM 节点树,收集所有 directives。返回结果是一个链接函数(linking function)。
2. 链接(Link):将 directives 绑定到一个作用域(scope)中,创建一个实况视图(live view)。在 scope 中的任何改变,将会在视图中得到体现(更新视图);任何用户对模版的活动(改变),将会体现在 scope model 中(双向绑定)。这使得 scope model 能够反映正确的值。
一些 directives,诸如 ng-repeat,会为每一个在集合(collection)中的元素复制一次特定的元素(组合)。编译和链接两个阶段,使性能得以提升。因为克隆出来的模版 (template) 只需要编译一次,然后为每一个集合中的元素进行一次链接(类似模版缓存)。
三、Directive
Directive 是一个行为,在编译过程中遇到特定的 HTML 结构时,它会被触发。Directives 可以放置在元素的 name、attribute、class 甚至注释中。以下是几种引用 ng-bind(一个内置 directive)的方法:
- <span ng-bind="exp"></span>
- <span class="ng-bind: exp;"></span>
- <ng-bind></ng-bind>
- <!-- directive: ng-bind exp -->
Directive 只是一个当编译器在 DOM 中遇到时会执行的一个函数(function)。directive API 文档中有详细讲解如何创建一个 directive。
下面是一个样例,可以让一个元素跟你的鼠标玩躲猫猫……
- <!DOCTYPE html>
- <html lang="zh-cn" ng-app="HideAnkSeek">
- <head>
- <meta charset="UTF-8">
- <title>
- 躲猫猫
- </title>
- <style type="text/CSS">
- .ng-cloak { display: none; }
- </style>
- </head>
- <body>
- <span class="ng-cloak" wildcat>
- 一碰我就跑~~来点我啊~~
- </span>
- <script src="../angular-1.0.1.js" type="text/javascript">
- </script>
- <script type="text/javascript">
- angular.module("HideAnkSeek", []).directive("wildcat",
- function($document) {
- var maxLeft = 400,
- maxTop = 300;
- var msg = ["我闪~~", "抓我呀~~~", "雅蠛蝶~~", "噢耶~~", "你真逊~!", "就差那么一点点了!", "继续吧~~总有一天我会累的"];
- return function(scope, element, attr) {
- element.css({
- "position": "absolute",
- "border": "1px solid green"
- });
- element.bind("mouseenter",
- function(event) {
- element.css({
- "left": parseInt(Math.random() * 10000 % maxLeft) + "px",
- "top": parseInt(Math.random() * 10000 % maxTop) + "px"
- }).text(msg[parseInt(Math.random() * 10000 % msg.length)]);
- }).bind("click",
- function(event) {
- element.text("噢My Lady Gaga。。。被你逮到了。。。");
- element.unbind("mouseenter");
- });
- };
- });
- </script>
- </body>
- </html>
在任意元素中添加 "wildcat" 这个属性,将会使该元素拥有新的行为。就这样,我们教会了浏览器如何处理会躲猫猫的元素(放心,你不是在某个房间,你不会挂的 -_-!)。我们通过这一途径扩展了浏览器的 "词汇量"。对于任意一个熟悉 HTML 规则的人,这算是一个比较自然的方式。
现在已经夜深了,明天继续。。。广告之后见
=================== 华丽的分割线 =======================
四、理解视图(View)
外面有许多模版系统,它们通常都通过模版字符串与数据进行连接,生成最终的 HTML 字符串,并将结果通过 innerHTML 属性写入某元素里。
这意味着任何数据发生改变时,都需要重新将数据、模版合并成字符串,然后当作 innerHTML 写回对应元素中。这里存在一些问题:(这里直译实在没法懂.. 唯有 YY) 假设有这么一个场景,模版里包含输入框。用户对在输入框进行输入,模版同步更新。普通模版通过 innerHTML、字符串与数据连接的方式更新视图,这样会打断用户的输入,体验不好。
Angular 是与众不同的。Angular 编译器(compiler)通过 directives 处理 DOM,而不是通过处理字符串模版。处理结果是一个与 scope model 组合并生成实时模版的链接函数(linking function)。视图与 scope model 的绑定对我们来说是透明的。开发者无须为更新视图、model 做任何动作。而且,因为没有使用 innerHTML 更新视图模版,所以用户输入不会被打断。此外,angular directives 不仅可以绑定文本值,而且还可以是拥有行为的结构(behavioral constructs)。
Angular 的这个处理方式,产生了一个稳定的 DOM。这意味着在 DOM 元素的生命周期里,一直与某 model 的实例绑定着,这个关系不会发生改变。这也意味着代码可以保持对某 DOM 对象的引用,对其注册事件函数,并且这个引用不会被模版数据合并所销毁。
(adsbygoogle = window.adsbygoogle || []).push({});
来源: http://www.phperz.com/article/17/0703/332179.html