概述
AngularJS的HTML编译器使浏览器能够识别新的HTML语法。它允许您将行为与HTML元素或属性相关联，甚至允许您创建带有自定义行为的新元素。安古拉杰把这种行为扩展到“指令”
当编写静态页面时，HTML有许多声明性结构来控制格式。比如你想让某个东西居中，你不用告诉浏览器“找到窗口的中点，和内容的中间结合起来”。您只需要向需要居中的元素添加align="center "属性。这就是声明性语言的力量。
但是声明性语言也是力所不及的，原因之一就是你不能用它来让浏览器识别新的语法。比如你不希望内容在中间，而是在左边到1/3，然后就做不到了。所以我们需要一种方法让浏览器学习新的HTML语法。
AngularJS的学生提供了一些对创建应用程序非常有用的说明。我们还希望您能为自己的应用程序创建一些有用的说明。这些扩展指令是创建应用程序的“领域特定语言”。
编译过程将发生在浏览器端；服务器端不会参与任何步骤，也不会预编译。
编译器
编译器是AngularJS提供的服务，通过遍历DOM来搜索其相关属性。整个编译过程分为两个阶段。
1.编译:遍历DOM，收集所有相关指令，生成一个链接函数。
2.链接:将范围绑定到指令以生成动态视图。对范围模型的任何更改都将反映在视图中，用户对视图的任何操作也将反映在范围模型中。这使得范围模型成为您的业务逻辑中唯一需要关心的东西。
一些指令，比如ng-repeat，将数据集中的每个DOM元素克隆一次。将整个编译过程分为编译和链接两个阶段，可以提高整体性能，因为克隆的模板只需要编译一次，然后链接到它们各自的模型实例。
指令
该指令指示“当关联的HTML结构进入编译阶段时应该做什么”。指令可以写在元素名、属性、css类名和注释中。下面是几个使用ng-bind指令实现相同功能的例子。
指令本质上只是一个函数，当编译器编译到相关的DOM时，需要执行这个函数。您可以在指令API文档中找到关于指令的更多详细信息。
这里有一个使元素可拖动的说明。请注意元素中的draggable属性。
index.html:
[div class="codetitle"]复制代码如下:
br/]
拖动我
script.js:
angular . module(' drag '，[])。
[/h/function($ document){
var startX = 0，startY=0，X=0，y = 0；
return function(scope，element，attr){
element . CSS({
position:' relative '，
border: '1px solid red '，
background color:' light grey '，
cursor:' pointer '
})；
element . bind(' mousedown '，function(event){
startX = event . screenx-x；
startY = event . screeny-y；
$ document . bind(' mousemove '，mousemove)；
$ document . bind(' mouseup '，mouseup)；
})；
函数mousemove(event){
y = event . screeny-startY；
x = event . screenx-startX；
element . CSS({
top:y+' px '，
left:x+' px '
})；
}
函数mouseup(){
$ document . unbind(' mousemove '，mousemove)；
$ document . unbind(' mouseup '，mouseup)；
}
}
})；
通过添加draggable属性，任何HTML元素都可以实现这种新的行为。我们改进的美妙之处在于我们赋予了浏览器新的功能。只要开发者熟悉HTML规则，我们就能以自然的方式扩展浏览器理解新行为和新语法的能力。
理解视图
网上有很多模板系统。大多是“将静态字符模板与数据绑定生成新字符，然后通过innerHTML插入页面元素”。
这意味着数据的任何变化都会导致数据再次与模板结合生成新的字符，然后插入到DOM中。会出现一些问题，比如需要读取用户输入并将其与模型的数据结合，需要覆盖用户输入，需要手动管理整个更新过程，缺乏丰富的表达式。
AngularJS不一样。AngularJS编译器使用带指令的DOM，而不是字符串模板。它返回一个链接函数，当与范围模型结合时，将生成一个动态视图。这个视图和模型之间的绑定过程是“透明的”。开发人员不需要做任何关于更新视图的事情。并且应用程序不使用innerHTML，所以我们不必覆盖用户的输入。更具体地说，Angular的指令不仅可以使用字符串形式的绑定，还可以使用一些指示行为的结构。
AngularJS的编译会生成一个“稳定的DOM”。这意味着绑定到数据模型的DOM元素的实例在绑定的生命周期中不会改变。这也意味着你可以在代码中获取DOM元素的一个实例引用并注册事件，而不用担心模板和数据合并时这个引用会丢失。