AngularJS的模板和数据绑定详解

Angular应用中的模板只是一些HTML片段而已，我们可以从服务器上加载，或者在标签中定义，处理方式与所有其他静态资源相同。如果你需要UI组件，你可以在模板中进行定义，使用标准的HTML加上Angular指令即可。模板一旦加载到浏览器之后，Angular将会把它和数据整合起来，然后再把这些模板展开到整个应用中。当我们显示购物车中的物品时，我们已经看到过这种例子：

这里，对于items数组中的每一个元素，Angular将会给外层

生成一份拷贝，包括其中的所有内容。那么，这里的数据是从哪儿来的呢？在购物车实例中，我们只是在代码中的一个数组里定义了它。在你刚开始构建UI，并且只是想测试一下它的运行效果的时候，这样能工作得很好。但是，大多数应用都会用到服务端的一些持久化的数据。浏览器中的应用将会连接到服务端，请求用户当前加载页面所需要的数据，然后Angular再把这些数据和模板融合起来。

基本的运作流程如下。

1．用户请求应用起始页。

2．用户的浏览器向服务器发起一次HTTP连接，然后加载index.html页面，这个页面里面包含了模板。

3．Angular被加载到页面中，等待页面加载完成，然后查找ng-app指令，用来定义模板边界。

4．Angular遍历模板，查找指令和绑定关系，这将触发一系列动作：注册监听器、执行一些DOM操作、从服务器获取初始化数据。这项工作的最后结果是，应用将会启动起来，并且模板被转换成了DOM视图。

5．连接到服务器去加载需要展示给用户的其他数据。

对于每一个Angular应用来说，步骤1到步骤3都是标准化的，步骤4和步骤5是可选的。这些步骤可以同步进行也可以异步进行。为了提升性能，对于应用中的第一个视图，你可以把数据和HTML模板一起加载进来，从而避免发起多次请求。

使用Angular构建应用的时候，可以将应用中的模板和数据分离开来，这样就可以把这些模板缓存起来。在第一次请求之后，只需要把新的数据下载到浏览器中即可。与JavaScript、图片、CSS以及其他资源一样，把这些模板缓存起来可以提升应用的性能。