在开始介绍angular原理以前，咱们有必要先了解下mvvm模式在angular中运用。虽然在angular社区一直将angular统称为前端MVC框架，同时angular团队也称它为MVW（Whatever）框架，但angular框架总体上更接近MVVM模式。下面是Igor Minar发布在Google+ https://plus.google.com/+IgorMinar/posts/DRUAkZmXjNV的文章内容：前端
MVC vs MVVM vs MVP. What a controversial topic that many developers can spend hours and hours debating and arguing about.angularjs
For several years +AngularJS was closer to MVC (or rather one of its client-side variants), but over time and thanks to many refactorings and api improvements, it’s now closer to MVVM – the $scope object could be considered the ViewModel that is being decorated by a function that we call a Controller.web
Being able to categorize a framework and put it into one of the MV* buckets has some advantages. It can help developers get more comfortable with its apis by making it easier to create a mental model that represents the application that is being built with the framework. It can also help to establish terminology that is used by developers.api
Having said, I’d rather see developers build kick-ass apps that are well-designed and follow separation of concerns, than see them waste time arguing about MV* nonsense. And for this reason, I hereby declare AngularJS to be MVW framework – Model-View-Whatever. Where Whatever stands for “whatever works for you”.架构
Angular gives you a lot of flexibility to nicely separate presentation logic from business logic and presentation state. Please use it fuel your productivity and application maintainability rather than heated discussions about things that at the end of the day don’t matter that much.mvc
在文中特别指出angular在屡次的API重构和改善，它愈来愈接近于MVVM模式，$scope能够被认为是ViewModl，而Controller则是装饰、加工处理这个ViewModel的JavaScript函数。做者更但愿你们关注于实现一个成功的，具备好的设计以及遵循“分离关注点”原则的应用程序，而不是去争论MV*，因此他将angular称为MVW框架，是什么并不重要，只要适合你的应用就行。app
MVVM模式是Model-View-ViewMode（模型-视图-视图模型）模式的简称，其最先出如今微软的WPF和Silverlight框架中。MVVM模式利用框架内置的双向绑定技术对MVP（Model-View-Presenter）模式的变型，引入了专门的ViewModel（视图模型）来实现View和Model的粘合，让View和Model的进一步分离和解耦。MVVM模式的优点有以下四点：框架
- 低耦合：View能够独立于Model变化和修改，同一个ViewModel能够被多个View复用；而且能够作到View和Model的变化互不影响；
- 可重用性：能够把一些视图的逻辑放在ViewModel，让多个View复用；
- 独立开发：开发人员能够专一与业务逻辑和数据的开发（ViewModel），界面设计人员能够专一于UI(View)的设计；
- 可测试性：清晰的View分层，使得针对表现层业务逻辑的测试更容易，更简单。
下面是angular中关于MVVM模式的运用：frontend
在angular中MVVM模式主要分为四部分：mvvm
- View：它专一于界面的显示和渲染，在angular中则是包含一堆声明式Directive的视图模板。
- ViewModel：它是View和Model的粘合体，负责View和Model的交互和协做，它负责给View提供显示的数据，以及提供了View中Command事件操做Model的途径；在angular中$scope对象充当了这个ViewModel的角色；
- Model：它是与应用程序的业务逻辑相关的数据的封装载体，它是业务领域的对象，Model并不关心会被如何显示或操做，因此模型也不会包含任何界面显示相关的逻辑。在web页面中，大部分Model都是来自Ajax的服务端返回数据或者是全局的配置对象；而angular中的service则是封装和处理这些与Model相关的业务逻辑的场所，这类的业务服务是能够被多个Controller或者其余service复用的领域服务。
- 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驱动的思惟所不一样之处。因此咱们在作angular开发的时候应该谨记下面几点：
毫不要先设计你的页面，而后用DOM操做去改变它
在以往的jQuery开发中，咱们会首先设计页面DOM结构，而后在利用jQuery来改变DOM结构或者实现动态交互效果。由于jQuery是为DOM驱动而设计的，对于拥有大量复杂的前端交互的项目，JavaScript的逻辑变得愈来愈臃肿，交互逻辑分散各处。
在MVVM模式下的angular开发中， 咱们首先须要在脑子里挂着Model的弦。不能老想着“我有XXX这个DOM，我但愿让它作XXX这种动态效果”，咱们须要从要完成的目标开始思考咱们须要或拥有怎么样的Model数据，而后设计咱们的应用， 最后才是设计视图，并用$scope来粘合它们。
Directive不是封装jQuery代码的“天堂”
如上条所述，咱们不能一开始就去想如何利用DOM操做的方法去实现应用目标，而后“堂而皇之”的写上一堆jQuery的代码，并将其封装到angular的directive中，最后不得不加上$scope.$apply()来通知angular你的ViewModel的改变，须要启动“脏检查机制”来更新你的改变到View。做者在多个客户项目中看见这种将Directive做为封装jQuery代码“天堂”的例子，其实对于这类问题，大部分状况下，咱们均可以用不多了angular代码将其重构为真正的angular way。特别在ng社区常常看见在angular directive中利用jQuery的on方法绑定click、keydown、blur等事件的代码，大部分状况咱们都能以对应的ng事件（ngClick、ngChange、ngBlur）来重构它们。
对于这类问题，首先咱们应该尽可能尝试复用angular的内置指令，以真正的angular way去思考咱们的问题，请慎重的引入jQuery的DOM方法和操做。
关于angular MVVM模式的资料，你还能够参考视频：https://frontendmasters.com/courses/angularjs-mvc-mvvm-mvwhatever/#v=ypur7bfbcq。