博弈AngularJS讲义(3) - 数据绑定

  在AngularJS中数据绑定(Data-binding)意指模型和视图组件之间的数据自动同步。AngularJS应用是基于模型驱动的(Developer Guide原文“The way that Angular implements data-binding lets you treat the model as the single-source-of-truth in your application. ”)。视图只是模型某个状态的展现。当Model状态改变时,视图会及时反映出变化,反之亦然。

  让们首先来看传统的基于模板的数据绑定实现(如下图所示), 模型通过后台逻辑处理后将一次性的投射到页面模板上,以视图展现出来。在第一次绑定后,模型状态发生变化将不会自动更新视图,这就意味着开发者得自己编写代码同步模型及视图。

  
博弈AngularJS讲义(3) - 数据绑定
 

   AngularJS强大的双向绑定解决了一次性单向绑定的问题,Angular会对定制的标记或指令进行编译,生成动态的视图,任何对视图的变动会及时反映到与之绑定的模型,反之模型状态的更新也会映射到视图上。这一切都是基于模型的状态, 极大的简化了编程。你可以把视图当成模型的即时展现。

   由于视图只是模型的展现,所以控制器和模型是解耦的,也简化了测试,可将控制器和视图分开测试不用考虑对DOM/浏览器的依赖。

     
博弈AngularJS讲义(3) - 数据绑定
 

后续章节中我们就对数据绑定基于AngularJS源码进行详解。下一章我们将重点介绍AngularJS的另外一个重要组件控制器(Controller).

相关推荐