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以及其他资源一样,把这些模板缓存起来可以提升应用的性能。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20171231A0MHZ600?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券