原文再续，书接上回。。。依旧参考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对象的引用，对其注册事件函数，并且这个引用不会被模版数据合并所销毁。

  1. AngularJs学习笔记--bootstrap
  2. AngularJs学习笔记--html compiler
  3. AngularJs学习笔记--concepts
  4. AngularJs学习笔记--directive
  5. AngularJs学习笔记--expression
  6. AngularJs学习笔记--Forms
  7. AngularJs学习笔记--I18n/L10n
  8. AngularJs学习笔记--IE Compatibility
  9. AngularJs学习笔记--Modules
  10. AngularJs学习笔记--Scope
  11. AngularJs学习笔记--Dependency Injection
  12. AngularJs学习笔记--Understanding the Model Component
  13. AngularJs学习笔记--Understanding the Controller Component
  14. AngularJs学习笔记--E2E Testing
  15. AngularJs学习笔记--Understanding Angular Templates
  16. AngularJs学习笔记--Using $location
  17. AngularJs学习笔记--Creating Services
  18. AngularJs学习笔记--Injecting Services Into Controllers
  19. AngularJs学习笔记--Managing Service Dependencies
  20. AngularJs学习笔记--unit-testing

AngularJs学习笔记--html compiler的更多相关文章

  1. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  2. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  3. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  4. AngularJs学习笔记--Guide教程系列文章索引

    在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...

  5. AngularJs学习笔记--bootstrap

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...

  6. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

  7. AngularJs学习笔记--Using $location

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...

  8. AngularJs学习笔记--unit-testing

    原版地址:http://docs.angularjs.org/guide/dev_guide.unit-testing javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...

  9. AngularJs学习笔记--Managing Service Dependencies

    原版地址:http://docs.angularjs.org/guide/dev_guide.services.managing_dependencies angular允许service将其他ser ...

随机推荐

  1. Qt5 Addin 出现问题模块计算机类型“x64”与目标计算机类型“X86”冲突

    Qt5 Addin 出现问题   怎样VS2013下安装Qt5的插件   http://jingyan.baidu.com/article/a948d65159d8890a2dcd2e84.html ...

  2. Ubuntu14.04安装GNOME3桌面

    以下是安装方法: sudo add-apt-repository ppa:gnome3-team/gnome3 sudo apt-get update sudo apt-get dist-upgrad ...

  3. 1）Java JDK和JRE

    >JRE :  Java Runtime Enviroment   Java的运行环境.面向Java程序的使用者,而不是开发者.如果你仅下载并安装了JRE,那么你的系统只能运行Java程序(不能 ...

  4. 【Weblogic】--Weblogic的部署方式和缓存

    参考网址: http://dead-knight.iteye.com/blog/1938882 Weblogic11g部署web应用,有三种方式,非常简单,但是很多新手部署总是出现若干错误,不知道如何 ...

  5. python & pandas链接mysql数据库

    Python&pandas与mysql连接 1.python 与mysql 连接及操作,直接上代码,简单直接高效: import MySQLdb try: conn = MySQLdb.con ...

  6. 2.python的变量与赋值

    首先,为何要使用变量这里就不再多说了,我这里就介绍一下变量的命令规则和变量赋值的内存行为. 1.变量的命名规则 变量其实通过一个标记调用内存中的值,而变量名就是这个标记的名称,但是万一这个标记已经被提 ...

  7. Python开发【第一篇】Python基础之生成器和迭代器

    生成器和迭代器 1.生成器 一个函数调用时返回一个迭代器,那这个函数就叫做生成器(generator):如果函数中包含yield语法,那这个函数就会变成生成器: def func(): yield 1 ...

  8. C 解决百度知道的一个高中题

    前言 今天看见一道百度知道上提问,是这样的. 仔细算了一下, 花了30min.才整出来了,估计现在回去参加高考,数学及格都悬.有时候想做这样的题有什么用, 学这些东西有什么意义,在这种方面浪费时间有什 ...

  9. 关于生成缩略图及水印图片时出现GDI+中发生一般性错误解决方法

    System.Drawing.Image OldImage = null; oldImage = System.Drawing.Image.FromFile(ImageUrl); 使用该方法读取图片时 ...

  10. Android WIFI 启动流程(TIP^^)

    前几天因为解决一堆Bug,没时间写.我不会每天都写,就是为了存档一些资料. 内容来源:工作中接触到的+高手博客+文档(Books)=自己理解 仅限参考^^ 此博客是上一个<<Android ...