AngularJS开发指南2：AngularJS初始化过程

自动初始化请将ng-app指令放到你应用的标签节点中, 如果你想要AngularJS自动执行整个<html>程序就把它放在 <html> 标签中。比如：<html ng-app>AngularJS会在DOMContentLoaded事件触发时执行，并通过ng-app指令寻找你应用的根作用域。如果 ng-app指令找到了，那么AngularJS将会：（1）载入指令相关的模块。这里指的是optionalModuleName模块。
（2）创建应用的“注入器（injector）”。
（3）拥有ng-app 指令的标签为根节点来编译其中的DOM。<！doctype html>
<html ng-app="optionalModuleName">
<body>
I can add: {{ 1+2 }}.
<script src="angular.js"></script>
</body>
</html>手动初始化如果你需要主动控制一下初始化的过程，你可以使用手动执行引导程序的方法。 <！doctype html>
<html xmlns:ng="http://angularjs.org">
<body>
Hello {{"World"}}！
<script src="http://code.angularjs.org/angular.js"></script>
<script>
angular.element（document）.ready（function（） {
angular.bootstrap（document）;
}）;
</script>
</body>
</html> 等页面和所有的脚本加载完之后，找到HTML模板的根节点——通常就是文档的根节点。
调用 angular.bootstrap方法，将模板编译成可执行的、数据双向绑定的应用程序。HTML编译器HTML在编写静态页面时，有很多声明式的结构来控制格式。比如你要把某个内容居中，你只需要添加一个 align="center" 的属性给需要内容居中的元素就行了。这就是声明式语言的强大之处。但是声明式语言也有力所不能及的地方，原因之一在于你不能用它来让浏览器识别新的语法。比如说，你不要内容居中，而是居左到1/3,这时它就做不到了。所以我们需要一个办法让浏览器能学会新的HTML语法。AngularJS的HTML编译器能让浏览器识别新的HTML语法。它能让你将行为关联到HTML元素或者属性上，甚至能让你创造具有自定义行为的新元素。AngularJS称这种行为扩展为“指令”。编译器是AngularJS提供的一项服务，它通过遍历DOM来查找和它相关的属性。整个编译的过程分为两个阶段。•编译：遍历DOM并且收集所有的相关指令，生成一个链接函数。
•链接：给指令绑定一个作用域，生成一个动态的视图。作用域模型的任何改变都会反映到视图上，并且视图上的任何用户操作也都会反映到作用域模型。这使得作用域模型成为你的业务逻辑里唯一要关心的东西。
有一些指令，比如ng-repeat会为数据集合里的每一项都克隆一次对应的DOM元素。将整个编译过程分为编译和链接两个阶段的作法改善了整体的性能，因为克隆出来的模板总共只需要被编译一次，然后链接到各自的模型实例上就行了。指令指示的是“当关联的HTML结构进入编译阶段时应该执行的操作”。指令可以写在元素的名称里，属性里，css类名里，注释里。下面有几个功能相同的使用ng-bind指令的例子。<span ng-bind="exp"></span>
<span class="ng-bind: exp;"></span>
<ng-bind></ng-bind>
<！-- directive: ng-bind exp -->指令本质上只是一个当编译器编译到相关DOM时需要执行的函数。下面是一条能让元素变得可拖拽的指令。注意<span>元素里的那个draggable属性。 <！doctype html>
<html ng-app="drag">
<head>
<script src="http://code.angularjs.org/angular-1.1.0.min.js"></script>
<script>
angular.module（"drag", []）.directive（"draggable", function（$document） {
var startX=0, startY=0, x = 0, y = 0;
return function（scope, element, attr） {
element.css（{
position: "relative",
border: "1px solid red",
backgroundColor: "lightgrey",
cursor: "pointer"
}）;
element.bind（"mousedown", function（event） {
startX = event.screenX - x;
startY = event.screenY - y;
$document.bind（"mousemove", mousemove）;
$document.bind（"mouseup", mouseup）;
}）; function mousemove（event） {
y = event.screenY - startY;
x = event.screenX - startX;
element.css（{
top: y + "px",
left: x + "px"
}）;
} function mouseup（） {
$document.unbind（"mousemove", mousemove）;
$document.unbind（"mouseup", mouseup）;
}
}
}）;
</script>
</head>
<body>
<span draggable>Drag ME</span>
</body>
</html> 通过加入draggable属性可以让任何HTML元素都实现这个新的行为。我们这种改进的优美之处在于我们给了浏览器新能力。我们用了一种只要开发者熟悉HTML规则，就会很自然的扩展浏览器理解新行为新语法的能力。angular视图网上有很多的模板系统，比如handlerbars。他们大多数都是“将静态的字符模板和数据绑定，生成新字符，然后通过innerHTML插入到页面元素中”。这意味着数据上的任何改变，都会导致数据要重新和模板结合生成新字符，再插入到DOM里。
AngularJS则不同，AngularJS编译器使用的是带指令的DOM，而不是字符串模板。它返回的是一个链接函数，这个函数和作用域模型结合就会生成一个动态视图。这个视图和模型的绑定过程是“透明的”。开发者不需要做任何关于更新视图的工作。并且应用程序也没有用到innerHTML。更特别的是，Angular的指令不仅仅能使用字符串形式的绑定，还可以使用一些指示行为的结构体，比如：ng-repeat。AngularJS权威教程清晰PDF版 http://www.linuxidc.com/Linux/2015-01/111429.htm希望你喜欢，并分享我的工作~带你走近AngularJS系列：

带你走近AngularJS - 基本功能介绍 http://www.linuxidc.com/Linux/2014-05/102140.htm
带你走近AngularJS - 体验指令实例 http://www.linuxidc.com/Linux/2014-05/102141.htm
带你走近AngularJS - 创建自定义指令 http://www.linuxidc.com/Linux/2014-05/102142.htm

如何在 AngularJS 中对控制器进行单元测试 http://www.linuxidc.com/Linux/2013-12/94166.htm在 AngularJS 应用中通过 JSON 文件来设置状态 http://www.linuxidc.com/Linux/2014-07/104083.htmAngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htmAngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交数据 http://www.linuxidc.com/Linux/2014-07/104402.htmAngularJS 的详细介绍：请点这里
AngularJS 的下载地址：请点这里本文永久更新链接地址：http://www.linuxidc.com/Linux/2015-01/112570.htm