AngularJs html编译器详细说明和示例代码

原文继续，书继续。还是指http://code.angularjs.org/1.0.2/docs/guide/compiler

一.摘要

Angular HTML编译器允许开发人员自定义新的HTML语法。编译器允许我们将行为附加到任何HTML元素或属性上，甚至是新的HTML标签和属性(如beauty girl=" cf "/beauty)。Angular将这些附加行为称为指令。

HTML有许多预定义的HTML样式结构来格式化静态文档(它可以告诉浏览器如何显示标签的内容)。假设有东西需要居中，我们不需要教浏览器怎么做(这里省略了n)。我们只需要在需要居中的标签上添加align="center "。这就是声明性语言的牛X。

但是，声明性语言也有其局限性，即不能告诉浏览器如何处理预定义范围之外的语法。例如，我们不能简单地告诉浏览器如何在浏览器的1/3处对齐文本。因此，我们需要一种方法让浏览器与时俱进，学习新的语法。

Angular预绑定了一些有助于构建应用程序的指令。我们也可以创建自己独特的指令。这些指令扩展将成为我们自己应用程序的“领域特定语言”。

这些编译将只在浏览器端进行，没有服务器端或预编译步骤。

第二，编译器

编译器作为一个角度服务，负责遍历DOM结构和查找属性。编译过程分为两个阶段：

1.编译：遍历DOM节点树，收集所有指令。返回的结果是一个链接函数。

2.链接：将指令绑定到一个范围，并创建一个实时视图。范围中的任何更改都将反映在视图中(更新视图)；模板上的任何用户活动(变更)都将反映在范围模型(双向绑定)中。这使得范围模型能够反映正确的值。

有些指令，如ng-repeat，为集合中的每个元素复制一次特定的元素(组合)。编译和链接两个阶段，这样可以提高性能。因为克隆的模板只需要编译一次，然后将每个集合中的元素链接一次(类似于模板缓存)。

第三，指令

指令是在编译过程中遇到特定的HTML结构时触发的行为。指令可以放在元素的名称、属性、类甚至注释中。以下是引用ng-bind(内置指令)的几种方法：

span ng-bind=' exp '/span span class=' ng-bind : exp；'/spang-bind/ng-bind！-directive : ng-bindex-directive只是一个函数，当编译器在DOM中遇到它时会执行它。指令应用编程接口文档中详细解释了如何创建方向性。

下面是一个例子，可以让一个元素用鼠标玩捉迷藏…

！doctype html lang=' zh-cn ' ng-app=' hideankseek ' head meta charset=' utf-8 ' title peek-and-seek/title style type=' text/CSS '。ng-斗篷{显示：无；}/style/headsdyspan class=' ng-斗篷'野猫一碰到我就跑~ ~帮帮我~ ~/span script src=' http :/angular-1 . 0 . 1 . js ' type=' text/JavaScript '/script script type=' text/JavaScript ' angular . module(' HideAnkSeek '，[])。指令(' wildcat '，函数($document) { var maxLeft=400，maxTop=300Var msg=['我闪~ ~ '，'抓我~ ~ '，'山口组蝴蝶~ ~ '，'哦耶~ ~ '，'你太逊了！'，‘只是有点短！‘去吧~ ~总有一天我会累的’]；返回函数(作用域、元素、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 ' })。文本(msg[ParSeint(Math . random()* 10000% msg . length)]；}).bind ('click '，function (event) {element.text('哦，我的Lady Gaga。你抓到我了。');element . unbind(' mouse enter ')；});};});/script/body/html将属性“wildcat”添加到任何元素都将赋予该元素新的行为。就这样，我们教会了浏览器如何处理可以捉迷藏的元素(放心，你不在某个房间，你不会挂机-_-！)。这样，我们扩展了浏览器的“词汇”。对于熟悉HTML规则的人来说，这是一种很自然的方式。

已经很晚了，明天继续吧。广告结束后见

==================华丽的分界线==========================================。

第四，理解视图(View)

外面有很多模板系统，通常通过模板字符串与数据连接，生成最终的HTML字符串，通过innerHTML属性将结果写入一个元素。

这意味着，当任何数据发生变化时，都需要再次将数据和模板合并成一个字符串，然后作为innerHTML写回到相应的元素中。这里有一些问题：(这里的直译实在是无法理解.只有YY)假设有一个场景，其中模板包含一个输入框。用户在输入框输入，模板同步更新。普通模板通过连接innerHTML、字符串和数据来更新视图，会打断用户的输入，导致体验不佳。

棱角分明就不一样了。Angular编译器通过指令而不是字符串模板来处理DOM。处理的结果是一个链接函数，它与范围模型相结合，并生成一个实时模板。视图和范围模型之间的绑定对我们来说是透明的。开发人员不需要做任何事情来更新视图和模型。此外，因为视图模板没有用innerHTML更新，所以用户输入不会被中断。此外，角度指令不仅可以绑定文本值，还可以是行为构造。

Angular的方法产生了一个稳定的DOM。这意味着在DOM元素的生命周期中，它们总是绑定到一个模型的实例，这种关系不会改变。这也意味着代码可以保留一个对DOM对象的引用，并为其注册一个事件函数，这个引用不会被模板数据合并破坏。