Angular JS解析（四）——模板与数据绑定

在Angular应用中模板就是我们从服务器或者在一个<script>标签中定义的HTML文档。用户可以在需要UI组件的地方利用标准HTML和Angular指令在模板中定义UI。在浏览器中，Angular通过将数据添加到模板中来将模板加载到用户应用中。就像之前所介绍的用户购物卡的例子：

<div ng-repeat="item in items">    <span>{{item.title}}</span>    ……</div>

这里，在items数组的每个元素中，每一次添加一个外层<div>，并将所有元素放入其中。但数据从何处而来呢？在我们的购物卡示例中，我们在源代码中定义了一个数组。这种方式在开始创建一个UI并且去进行测试该UI究竟如何工作运行的非常顺利。但对于大多数的app会使用服务器中持续的数据源。浏览器中的APP连接服务器并且在用户需求时向服务器请求相应的数据，然后Angular将数据放入用户模板中。

       基本的启动流程如下：

1、用户请求应用程序的第一页；

2、用户浏览器产生一个HTTP连接请求到服务器，并且加载包含用户模板的index.html页面。

3、Angular加载进页面，等待页面被全面加载，同时寻找ng-app来定义它的模板界限。

4、Angular传递模板并且寻找相关的指令和绑定。这将产生监听（listener）注册和DOM操作并从服务器中获取原始数据。这样操作的最终结果是APP被引导并且模板被转换成一个DOM视图。

5、用户连接服务器并加载用户所需要的附加数据。

其中步骤1到3是每个Angular APP的标准步骤。步骤4和步骤5是可选的。这些步骤的运行可以使同步的也可以是异步的。例如，用户APP在第一个视图中展现给用户的数据可以和HTML模板一起传递，以此避免了多次请求。

通过Angular来构造应用时，将用户应用模板和数据相分离是十分常用的。这样做的好处是这些模板可以放在缓存中缓存，这样只有在浏览器第一次加载时只需要获得新的数据即可。就像Javascript、图像、CSS文件和其他资源一样，缓存这些模板能够让应用性能更好。