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