angular背景

背景
angularjs是什么?

AngularJS誕生于2009年，由Misko Hevery 等人創(chuàng)建锌俱，后為Google所收購。是一款優(yōu)秀的前端JS框架渴语，已經(jīng)被用于Google的多款產(chǎn)品當中福扬。AngularJS有著諸多特性，最為核心的是：MVVM间驮、模塊化躬厌、自動化雙向數(shù)據(jù)綁定、語義化標簽竞帽、依賴注入扛施、等等。

angularjs 為何會火?

AngularJS是為了克服[HTML]在構(gòu)建應(yīng)用上的不足而設(shè)計的屹篓。HTML是一門很好的為靜態(tài)文本展示設(shè)計的聲明式語言疙渣，但要構(gòu)建WEB應(yīng)用的話它就顯得乏力了。所以我做了一些工作（你也可以覺得是小花招）來讓瀏覽器做我想要的事堆巧。

通常妄荔，我們是通過以下技術(shù)來解決靜態(tài)網(wǎng)頁技術(shù)在構(gòu)建動態(tài)應(yīng)用上的不足：
類庫 - 類庫是一些函數(shù)的集合，它能幫助你寫WEB應(yīng)用谍肤。起主導(dǎo)作用的是你的代碼啦租，由你來決定何時使用類庫。類庫有：jQuery等
框架 - 框架是一種特殊的荒揣、已經(jīng)實現(xiàn)了的WEB應(yīng)用篷角，你只需要對它填充具體的業(yè)務(wù)邏輯。這里框架是起主導(dǎo)作用的乳附，由它來根據(jù)具體的應(yīng)用邏輯來調(diào)用你的代碼内地“槌危框架有：knockout、sproutcore等阱缓。
AngularJS使用了不同的方法非凌，它嘗試去補足HTML本身在構(gòu)建應(yīng)用方面的缺陷。AngularJS通過使用我們稱為標識符(directives)的結(jié)構(gòu)荆针，讓瀏覽器能夠識別新的語法敞嗡。例如：
使用雙大括號{{}}語法進行數(shù)據(jù)綁定；
使用DOM控制結(jié)構(gòu)來實現(xiàn)迭代或者隱藏DOM片段航背；
支持表單和表單的驗證喉悴；
能將邏輯代碼關(guān)聯(lián)到相關(guān)的DOM元素上；
能將HTML分組成可重用的組件玖媚。

angular 解決了什么問題箕肃？

AngularJSWEB應(yīng)用中的一種端對端的解決方案。這意味著它不只是你的WEB應(yīng)用中的一個小部分今魔，還是一個完整的端對端的解決方案勺像。這會讓AngularJS在構(gòu)建一個CRUD（增加Create、查詢Retrieve错森、更新Update吟宦、刪除Delete）的應(yīng)用時顯得非常強大， 可以這么認為web端90%的產(chǎn)品都是crud應(yīng)用涩维。

理論意義和應(yīng)用價值

angularjs
優(yōu)點：

1. 模板功能強大豐富殃姓，并且是聲明式的，自帶了豐富的Angular指令瓦阐；
2. 是一個比較完善的前端MV*框架蜗侈，包含模板，數(shù)據(jù)雙向綁定垄分，路由宛篇，模塊化，服務(wù)薄湿，過濾器叫倍，依賴注入等所有功能；
3. 自定義Directive豺瘤，比jQuery插件還靈活吆倦，但是需要深入了解Directive的一些特性，簡單的封裝容易坐求，復(fù)雜一點官方?jīng)]有提供詳細的介紹文檔蚕泽，我們可以通過閱讀源代碼來找到某些我們需要的東西，如：在directive使用 $parse；
4. ng模塊化比較大膽的引入了Java的一些東西（依賴注入）须妻，能夠很容易的寫出可復(fù)用的代碼仔蝌，對于敏捷開發(fā)的團隊來說非常有幫助，我們的項目從上線到目前荒吏，UI變化很大敛惊，在摸索中迭代產(chǎn)品，但是js的代碼基本上很少改動绰更。
5. 補充：Angular支持單元測試和e2e-testing瞧挤。

缺點：

1. 驗證功能錯誤信息顯示比較薄弱，需要寫很多模板標簽儡湾，沒有jQuery Validate方便特恬，所以我們自己封裝了驗證的錯誤信息提示，詳細參考 why520crazy/w5c-validator-angular · GitHub** 徐钠；
2. ngView只能有一個癌刽，不能嵌套多個視圖，雖然有 angular-ui/ui-router · GitHub** 解決丹皱，但是貌似ui-router 對于URL的控制不是很靈活妒穴，必須是嵌套式的（也許我沒有深入了解或者新版本有改進）；
3. 對于特別復(fù)雜的應(yīng)用場景摊崭，貌似性能有點問題，特別是在Windows下使用chrome瀏覽器杰赛，不知道是內(nèi)存泄漏了還是什么其他問題呢簸，沒有找到好的解決方案，奇怪的是在IE10下反而很快乏屯，對此還在觀察中根时；
4. 這次從1.0.X升級到1.2.X，貌似有比較大的調(diào)整辰晕，沒有完美兼容低版本蛤迎，升級之后可能會導(dǎo)致一個兼容性的BUG，具體詳細信息參考官方文檔 AngularJS** 含友，對應(yīng)的中文版本：Angular 1.0到1.2 遷移指南**5. ng提倡在控制器里面不要有操作DOM的代碼替裆，對于一些jQuery 插件的使用，如果想不破壞代碼的整潔性窘问，需要寫一些directive去封裝插件辆童，但是現(xiàn)在有很多插件的版本已經(jīng)支持Angular了，如：jQuery File Upload Demo**6. Angular 太笨重了惠赫，沒有讓用戶選擇一個輕量級的版本把鉴，當然1.2.X后，Angular也在做一些更改儿咱，比如把route庭砍，animate等模塊獨立出去场晶，讓用戶自己去選擇。

國內(nèi)外研究現(xiàn)狀及發(fā)展趨勢

<p>

angular的歡迎程度

angularjs 開源在 github上https://github.com/angular/angular.js
angualr已經(jīng)擁有17377的fork 和 40360的start.
這在業(yè)界框架歡迎程度來說基本可以排前5

angular的社區(qū)

angularjs在git上面 已經(jīng)有66183個開源的項目

Paste_Image.png

社區(qū)非常的完善 各種組件及其豐富怠缸。

angular的現(xiàn)狀與未來

目前angular1.0的最新版本為1.4诗轻。
在ng2015大會上面(2014年10月) 公布了angular2.0 的計劃

AngularJS團隊表示“AngularJS 2.0是移動應(yīng)用的框架”。該框架將繼續(xù)支持桌面凯旭，但其主要關(guān)注點變成了移動領(lǐng)域概耻。它的目標還包括通過轉(zhuǎn)譯器支持EcmaScript 6（因為瀏覽器還不支持ES6）。
為了從開發(fā)者那里得到反饋罐呼，一篇關(guān)于"AngularJS 2.0"的文章中列出了計劃中的更改鞠柄，以及指向設(shè)計文檔的鏈接。
下面簡要介紹一下這些計劃中的更改：
支持ES6和Traceur轉(zhuǎn)移器嫉柴。開發(fā)者也可以選擇繼續(xù)編寫ES5厌杜。
更快速的變化檢查
通過整個Angular范圍內(nèi)的日志服務(wù)diary.js進行監(jiān)控
更好的模塊化
更簡化的依賴注入，包括聲明優(yōu)于命令计螺、通過ES6模塊進行模塊加載夯尽、通過子注入器延遲加載部分JS。這些設(shè)計大部分已經(jīng)實現(xiàn)登馒。
模板和指令改進匙握，包括簡化的指令A(yù)PI、使用Web標準與其他組件框架集成陈轿、增強的性能以及允許IDE分析和驗證模板圈纺。
更好的觸摸動畫，使用瀏覽器后退的原生特性麦射，能夠達到60+FPS的性能蛾娶。
增強的路由，包括基于狀態(tài)的路由潜秋、與認證和授權(quán)進行集成以及可以選擇對保留某些視圖的狀態(tài)蛔琅。
更好的持久化，在于服務(wù)器同步時峻呛，支持“永久脫機”模式罗售，這對移動設(shè)備來說非常有用。
僅支持能自動更新的現(xiàn)代瀏覽器杀饵，包括Chrome莽囤、FireFox、Opera切距、Safari和IE11朽缎。對于移動設(shè)備，包括Android、iOS 6+话肖、Windows Phone 8+的Chrome北秽，和FireFox Mobile。也“有可能”支持舊版本的Android最筒。

使用angularjs國外公司

google體系
下面的鏈接列取了國外使用angular開發(fā)的項目地址
https://github.com/angular/angular.js/wiki/Projects-using-AngularJS

使用angularjs國內(nèi)公司

1. 知乎 (知乎專欄)
2. 阿里云
3. 青云
4. 蘇寧公有云平臺
   等等.....

技術(shù)關(guān)鍵與創(chuàng)新點

angular中技術(shù)關(guān)鍵點:

數(shù)據(jù)的雙向綁定

Angular實現(xiàn)了雙向綁定機制贺氓。所謂的雙向綁定，無非是從界面的操作能實時反映到數(shù)據(jù)床蜘，數(shù)據(jù)的變更能實時展現(xiàn)到界面辙培。
http://www.html-js.com/article/Using-Angular-to-develop-web-application-of-AngularJS-twoway-data-binding-secret

依賴注入

一般來說，一個對象只能通過三種方法來得到它的依賴項目：

我們可以在對象內(nèi)部創(chuàng)建依賴項目
我們可以將依賴作為一個全局變量來進行查找或引用
我們可以將依賴傳遞到需要它的地方
在使用依賴注入時邢锯，我們采用的是第三種方式（另外兩種方式都會引起其他困難的挑戰(zhàn)扬蕊，例如污染全局作用域以及使隔離變得幾乎不可能）。依賴注入是一種設(shè)計模式丹擎，它移除了硬編碼依賴尾抑，因此使得我們可以在運行中隨時移除并改變依賴項目。

在運行過程中能夠修改依賴項目的能力允許我們創(chuàng)建隔離環(huán)境蒂培，這對于測試來說是非常理想的再愈。我們可以用測試環(huán)境中的一個冒牌對象來替換生產(chǎn)環(huán)境中的一個真實對象。

從功能上來說护戳，這種模式通過自動提前查找依賴以及為依賴提供目標翎冲，以此將依賴資源注入到需要它們的地方。

在我們編寫一個依賴于其他對象或庫的組件時媳荒，我們會描述它的依賴項目府适。再運行過程中，一個注入器將會創(chuàng)建依賴的實例并將它們傳遞給一個依賴消費者肺樟。
http://www.html-js.com/article/Injection-with-Angular-development-web-application-AngularJS-explain-only-dependence

mvvm

Model View ViewModel - MVVM
MVVM核心：Model(模型)，View(UI)逻淌，ViewModel(視圖模型)
Model：數(shù)據(jù)展現(xiàn)的對象模型
View：頁面UI
ViewModel：實現(xiàn)Model和View的雙向綁定

它們的工作模型應(yīng)該是：Model<=>ViewModel<=>View

模塊化

在AngularJs中田柔，應(yīng)用可以拆分為一個個的小模塊，模塊之間可以相互依賴骨望，這樣各個功能可以非常方便重用和測試硬爆。在HTML中使用ng-app指令即可定義一個Module:

指令

指令"是什么?
簡單點說，指令就是一些附加在HTML元素上的自定義標記（例如：屬性擎鸠，元素缀磕，或css類），它告訴AngularJS的HTML編譯器 ([$compile

](http://docs.ngnice.com/api/ng.$compile)) 在元素上附加某些指定的行為，甚至操作DOM袜蚕、改變DOM元素糟把，以及它的各級子節(jié)點。
Angular內(nèi)置了一整套指令牲剃，如ngBind
, ngModel
, 和ngView
遣疯。 就像你可以創(chuàng)建控制器和服務(wù)那樣，你也可以創(chuàng)建自己的指令來讓Angular使用凿傅。 當Angular 啟動器引導(dǎo)你的應(yīng)用程序時缠犀， HTML編譯器就會遍歷整個DOM，以匹配DOM元素里的指令聪舒。
對于HTML模板來說辨液，"編譯"意味著什么? 對于AngularJS來說，“編譯”意味著把監(jiān)聽事件綁定在HTML元素上过椎，使其可以交互室梅。 我們使用"編譯"這個術(shù)語的原因就在于，把指令關(guān)聯(lián)到DOM上的這種遞歸操作非常類似于 編譯式語言編譯源代碼的過程疚宇。

http://docs.ngnice.com/guide/directive

測試驅(qū)動

測試驅(qū)動開發(fā)亡鼠，angularjs一開始就以此為目標，使用angular開發(fā)的應(yīng)用可以很容易地進行單元測試和端對端測試敷待，這解決了傳統(tǒng)的js代碼難以測試和維護的缺陷

參考這篇文章更好
http://www.chinaz.com/design/2012/0725/264318_2.shtml

方案和可行性分析