Angularjs 簡介

Angularjs 簡介

INTRODUCTION(介紹)

AngularJS誕生於2009年,由Misko Hevery 等人建立,後爲Google所收購。是一款優秀的前端JS框架,已經被用於Google的多款產品當中。AngularJS是爲了克服HTML在構建應用上的不足而設計的。AngularJS有着諸多特性,最爲核心的是:MVVM、模塊化、自動化雙向數據綁定、語義化標籤、依賴注入等等。javascript

閱讀材料html

INSPECTION(省視)

MVVM框架

MVVM框架的全稱是Model-View-ViewModel,是Microsoft公司提出並在WPF和WinPhone上普遍使用的設計模式。關於MVVM的設計理念能夠參考Microsft的文章ios

[初始化過程]git

  1. 設置ViewModel與Model的對應關係,創建ViewModelangularjs

  2. 綁定ViewModel到對應的View上並進行渲染github

MVVM與傳統的MVC框架之間最大的區別在於其接收User Action進行更新的過程不一樣bootstrap

傳統的MVC更新流程segmentfault

  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

閱讀材料

Two-way data binding 雙向數據綁定

單向數據綁定: View的更新必定要Model和Template進行Render重繪畫面

雙向數據綁定:一次性的模板編譯,持續更新View

閱讀材料

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'];

閱讀材料

WHY(爲何)

爲何是Angularjs

  1. 模板功能強大豐富,自帶了豐富的聲明式的Angular指令;

  2. 完善的前端MVC框架,包含模板,數據雙向綁定,路由,模塊化,服務,過濾器,依賴注入等全部功能;

  3. 自定義Directive,自定義html標籤;

  4. 代碼量很是少;

  5. 單元測試;

  6. 豐富的文檔和開源資源

TUTORIAL(教程)

RESOURCE(資源)

豐富的資源是當初選擇angularjs的重要緣由

相關文章
相關標籤/搜索