Angularjs 简介

Angularjs 简介

INTRODUCTION(介绍)

AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS是为了克服HTML在构建应用上的不足而设计的。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

阅读材料

• Google前端框架AngularJS创始人Misko Hevery专访

• AngularJS 在实际应用中有哪些优缺点？

INSPECTION(省视)

MVVM框架

MVVM框架的全称是Model-View-ViewModel，是Microsoft公司提出并在WPF和WinPhone上广泛使用的设计模式。关于MVVM的设计理念可以参考Microsft的文章。

[初始化过程]

1. 设置ViewModel与Model的对应关系，建立ViewModel

2. 绑定ViewModel到对应的View上并进行渲染

MVVM与传统的MVC框架之间最大的区别在于其接收User Action进行更新的过程不同

传统的MVC更新流程

1. View接收到用户的User Action, 调用Controller做对应的业务处理

2. Controller根据业务逻辑更新Model

3. Model更新完成之后，Controller用新的Model数据去更新View

1. View|ViewController接收到用户的User Action，调用ViewModel做对应的业务处理数据更新

2. ViewModel数据更新完成之后进行View的更新

3. ViewModel数据更新完成之后通知Model进行更新

现在已经更新了，叫MVW(Model-View-Whatever)......whatever

阅读材料

• Model-View-ViewModel for iOS

• Using the Model-View-ViewModel Pattern

Two-way data binding 双向数据绑定

单向数据绑定: View的更新一定要Model和Template进行Render重绘画面

双向数据绑定：一次性的模板编译，持续更新View

阅读材料

• Data Binding

Dirty Checking 脏数据检查

窃以为，这是angularjs里面最牛B的地方

1. 在渲染的时期，所有做的数据绑定都会被加到$watch列表中

2. 当发生Event的时候，调用$apply方法去检查数据一致性既ViewModel与Model是否一致(类似于事件触发机制)

3. 将dirty-checking看做是一个消化系统，消化系统会自己运行消化脏(pai)数(xie)据(wu)

Dependency Injection 依赖注入

在框架中为我们提供了angular.injector(modules)DI注入注射器

myController.$inject = ['$scope', '$alert'];

阅读材料

• 如来神掌 - 玩转 AngualrJS 的依赖注入

WHY(为什么)

为什么是Angularjs

1. 模板功能强大丰富，自带了丰富的声明式的Angular指令；

2. 完善的前端MVC框架，包含模板，数据双向绑定，路由，模块化，服务，过滤器，依赖注入等所有功能；

3. 自定义Directive，自定义html标签；

4. 代码量非常少；

5. 单元测试；

6. 丰富的文档和开源资源

TUTORIAL(教程)

• https://angularjs.org/

RESOURCE(资源)

丰富的资源是当初选择angularjs的重要原因

• https://angularjs.org/

• http://angular-ui.github.io/

• https://angular-ui.github.io/bootstrap/ for cms

• https://coding.net/u/leewind/p/ifunq-inspina-admin/git

• https://github.com/marceljuenemann/angular-drag-and-drop-lists

• https://www.youtube.com/channel/UCzrskTiT_ObAk3xBkVxMz5g