angular在多次的API重构和改善,它越来越接近于MVVM模式,$scope可以被认为是ViewModl,而Controller则是装饰、加 工处理这个ViewModel的JavaScript函数。 Igor Minar (google 工程师,负责Google的开源项目angular)更希望大家关注于实现一个成功的,具有好的设计以及遵循“分离关注点”原则的应用程序,而 不是去争论MV*,所以他将angular称为MVW框架,是什么并不重要,只要适合你的应用就行。

MVVM模式是Model-View-ViewMode(模型-视图-视图模型)模式的简称,其最早出现在微软的WPF和Silverlight框 架中。MVVM模式利用框架内置的双向绑定技术对MVP(Model-View-Presenter)模式的变型,引入了专门的ViewModel(视图 模型)来实现View和Model的粘合,让View和Model的进一步分离和解耦。MVVM模式的优势有如下四点:

  1. 低耦合:View可以独立于Model变化和修改,同一个ViewModel可以被多个View复用;并且可以做到View和Model的变化互不影响;
  2. 可重用性:可以把一些视图的逻辑放在ViewModel,让多个View复用;
  3. 独立开发:开发人员可以专注与业务逻辑和数据的开发(ViewModel),界面设计人员可以专注于UI(View)的设计;
  4. 可测试性:清晰的View分层,使得针对表现层业务逻辑的测试更容易,更简单
MVVM模式的运用如下:

在angular中MVVM模式主要分为四部分:

  1. View:它专注于界面的显示和渲染,在angular中则是包含一堆声明式Directive的视图模板。
  2. ViewModel:它是View和Model的粘合体,负责View和Model的交互和协作,它负责给View提供显示的数据,以及提供了View中Command事件操作Model的途径;在angular中$scope对象充当了这个ViewModel的角色;
  3. Model:它是与应用程序的业务逻辑相关的数据的封装载体,它是业务领域的对象,Model并不关心会被如何显示或操作,所以模型也不会包含任 何界面显示相关的逻辑。在web页面中,大部分Model都是来自Ajax的服务端返回数据或者是全局的配置对象;而angular中的service则 是封装和处理这些与Model相关的业务逻辑的场所,这类的业务服务是可以被多个Controller或者其他service复用的领域服务。
  4. Controller:这并不是MVVM模式的核心元素,但它负责ViewModel对象的初始化,它将组合一个或者多个service来获取业务领域Model放在ViewModel对象上,使得应用界面在启动加载的时候达到一种可用的状态。
 
View不能直接与Model交互,而是通过$scope这个ViewModel来实现与Model的交互。对于界面表单的交互,通过 ngModel指令来实现View和ViewModel的同步。ngModelController包含$parsers和$formatters两个转 换器管道,它们分别实现View表单输入值到Model数据类型转换和Model数据到View表单数据的格式化。对于用户界面的交互Command事件 (如ngClick、ngChange等)则会转发到ViewModel对象上,通过ViewModel来实现对于Model的改变。然而对于Model 的任何改变,也会反应在ViewModel之上,并且会通过$scope的“脏检查机制”($digest)来更新到View。从而实现View和 Model的分离,达到对前端逻辑MVVM的分层架构。
angular中MVVM模式的实现,以领域Model为中心思维,遵循“分离关注点”设计原则,这也是与jQuery以DOM驱动的思维所不同之处。