angularjs compiler编译器
来源:互联网 发布:ubuntu卸载skype 编辑:程序博客网 时间:2024/06/05 17:54
Angular的HTML compiler允许开发者自定义新的HTML语法。compiler允许我们对任意HTML元素或属性,甚至是新的HTML标签、属性(如<beautiful girl=”cf”></beautiful >)附加行为。Angular将这些附加行为称为directives。
HTML有很多专门格式化静态文档的预定义HTML样式结构【告诉浏览器如何显示标记的内容】,假设某标签内容部分需要进行居中处理,我们仅仅需要在标签中添加属性 align="center"便可,这也就是声明式语言了。
但声明式语言也有其局限的地方,比如无法处理预定义范围之外的语法。而angular预先绑定一些对构建应用有帮助的directives【属性】,当然也可以构建自己独特的directive,而这些创建的directive将成为我们自己“特定领域语言”
还有这里需要注意的是,这些编译都仅仅发生生浏览器端,无需服务器和预编译过程。
二、接下来我们来详细的介绍下compiler
首先compiler为作为angular的一个服务,负责遍历DOM结构,寻找属性,其编译过程分为两步:
1.编译(compiler):遍历DOM节点树,返回一个链接函数
2.链接(link):将directives绑定到一个作用域中,创建一个实况视图(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>
Angular编译器(compiler)通过directives处理DOM,而不是通过处理字符串模版。处理结果是一个与scope model组合并生成实时模版的链接函数(linking function)。视图与scope model的绑定对我们来说是透明的。开发者无须为更新视图、model做任何动作。而且,因为没有使用innerHTML更新视图模版,所以用户输入不会被打断。此外,angular directives不仅可以绑定文本值,而且还可以是拥有行为的结构
- angularjs compiler编译器
- 编译器设计: naive compiler
- 【开源】司马编译器 Smart Compiler
- Closure Compiler - JavaScript优化编译器
- javascript优化编译器 - Closure Compiler
- 解析SQL编译器SQL COMPILER
- AngularJs学习笔记--html compiler
- 免费的C++编译器(Free C++ Compiler)
- 【开源】司马编译器 Smart Compiler 符号表
- 【自定义Xcode编译器】Custom Compiler in Xcode
- W5300E01-ARM 交叉编译器(Cross Compiler)用户手册
- 编译器内联函数(Compiler intrinsics)
- Dubbo入门学习--动态代码编译器Compiler
- AngularJs html compiler详解及示例代码
- AngularJS系列:4、HTML编译器
- AngularJS开发指南03:HTML编译器
- f2py的语法(备查)-使用Intel Visual Fortran Compiler编译器
- a list of compiler books — 汗牛充栋的编译器参考资料
- 2013年11月6日_生活随笔
- [Python]核心编程之生产者-消费者和Queue模块
- C# 下利用ICSharpCode.SharpZipLib.dll实现文件/文件夹压缩、解压缩
- C++学习之new与delete、malloc与free
- 程序存储器与数据存储器
- angularjs compiler编译器
- 如何在写GUI程序时,将调试信息打印在控制台窗口
- 哈佛结构与普林斯顿结构的区别通俗易懂
- Centos bridge 上网配置
- java.lang.OutOfMemoryError: Java heap space 解决
- 南阳理工acm
- POJ1274_The Perfect Stall(二分图最大匹配)
- js中关于setTimeOut()循环的问题
- 关于java中getClass()和super.getClass()