ANGULAR有哪些優缺點?
這裡是修真院前端小課堂，每篇分享文從
【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴充套件思考】【更多討論】【參考文獻】
八個方面深度解析前端知識/技能，本篇分享的是：
【ANGULAR有哪些優缺點?】
大家好，我是IT修真院武漢分院學員曾健，一枚正直純潔善良的WEB前端程式設計師。
今天給大家分享一下，修真院官網JS任務10，深度思考中的知識點——ANGULAR有哪些優缺點?
1.背景介紹
Angular.js是google開發者設計和開發的一套前端開發框架，幫助你簡化前端開發的負擔。
AngularJS 通過新的屬性和表示式擴充套件了 HTML。
AngularJS 可以構建一個單一頁面應用程式
那麼AngularJS有哪些優點與缺點呢？
2.知識剖析
AngularJS的優點與缺點：
AngularJS的優點：
1.良好的應用程式結構：
通常情況下，我們編寫 JavaScript 沒有明確的結構。雖然在編寫小應用程式的時候沒有問題，但這顯然是不適合於大規模的應用程式。
使用 AngularJS，您可以通過MVC（模型 - 檢視 - 控制器）或MVVM （模型 - 檢視 - 檢視模型）模式來組織原始碼。
AngularJS 是一個 MVW 框架，其中W代表可以用於任何專案。你可以組織你的程式碼模組，它可顯著提高應用程式的可測試性和可維護性。資料、業務邏輯、檢視的分離。
2.雙向資料繫結
資料繫結肯定是 AngularJS 最佳功能之一。
你可以宣告繫結的模型到 HTML 元素。當模型發生變化時，檢視會自動更新，反之亦然。
這可以減少大量的傳統樣板程式碼，保持模型和檢視同步。
3.指令
自定義Directive，比jQuery外掛還靈活，但是需要深入瞭解Directive的一些特性，簡單的封裝容易，複雜一點官方沒有提供詳細的介紹文件，我們可以通過閱讀原始碼來找到某些我們需要的東西，如：在directive使用 $parse；
4.HTML 模板
AngularJS 使用 HTML 模板，這使事情變得簡單，並允許設計人員和開發人員同時工作。
設計人員可以按照通常的方式建立使用者介面，而開發人員可以使用宣告性繫結語法很容易配合不同的UI元件的資料模型。
5.依賴注入
ng模組化比較大膽的引入了Java的一些東西（依賴注入），能夠很容易的寫出可複用的程式碼，對於敏捷開發的團隊來說非常有幫助，我們的專案從上線到目前，UI變化很大，在摸索中迭代產品，但是js的程式碼基本上很少改動。
AngularJS的缺點:
1.效能
雙向資料繫結是一把雙刃劍。隨著元件增加，專案越來越複雜，雙向資料繫結帶來效能問題。
雙向資料繫結是如何影響效能的？在JavaScript（ES5）中，並沒有實現當變數或物件改變時發出通知的功能，Angular的實現方法被叫做“Dirty-checking（髒檢查機制）”，通過跟蹤資料的改變再動態更新使用者介面（UI）。 在Angular的作用域中任何操作的執行都會引發Dirty-checking，隨著繫結數量的增加效能就會越低。
2. Angular 2.0推翻重做使得目前不宜採用此框架
Angular 1.x版本其實是個比較舊的東西了，現在看來有些理念過時了，比如依賴注入、自己獨特的模組化，這些東西其實在ES6下已經很好地被解決了。 Angular的2.0幾乎是一個推翻重做的框架，估計不會有1.X的upgrade方案。所以如果現在新開始的專案採用Angular的話，會是一個很尷尬的時機。同樣，如此大的改動似乎也反面印證了1.X並不是那麼好。
3.學習成本高
使用Angular需要學習大量的概念，包括但不限於：
○ 模組
○ 控制器
○ 指令
○ 作用域
○ 模板
○ 鏈式函式
○ 過濾器
○ 依賴注入
4.不適合型別開發：
(1：內容網站，需要SEO的。(SEO目前也有了prerender解決方案) https//prerender.io
(2：互動頻繁的，如遊戲之類互動體驗網站。
(3，太過於簡單的頁面。
Angular更適合於CRUD的管理系統開發。
3.常見問題
Angular2 相比 Vue 有什麼優勢？
4.解決方案
Angular2相對於Vue的優勢在Vue2.0之後已經削弱很多了。比如SSR（Vue2已經原生支援）和全棧式框架（官方推薦Vuex+Vue-Router），native端也有阿里巴巴的weex。但是Angular2在API設計的完整度和覆蓋度上還是Vue所不能及的，主要有這麼幾點:
1. Angular2原生Form支援： Angular2原生的Form模組功能相當強大。除了雙向繫結之類的基本功能，還能通過programatic API 控制dom元素的表單行為。也有成型API提供自定義validator。這一點Vue只有v-model和第三方庫。對於後臺之類的重表單應用，還是Ng2有優勢。
2. 依賴注入無論你喜不喜歡DI，這就是Angular2的強大功能之一。有DI可以在不改變程式碼結構的情況下完成功能替換。（如，在desktop和mobile有不同功能，可以通過注入不同service實現，而共用相同的template和directive）。Vue則需要程式設計師自己規劃程式碼組織，用來支援共享元件。DI也可以用於類似module local state的功能。比如，一個視訊播放控制元件有幾個子元件完成，子元件需要分享一個狀態。這一點Angular2有原生的service injection pattern。而Vue則沒有官方推薦。
3. 對標準向後相容Angular2在一些細節上對標準有更好的支援。比如 list differ 演算法中 Angular2 可以支援實現了Symbol.iterator的物件，而Vue只能支援Array。對Observable和Promise，Angular2在應用的各個地方，甚至模板級別都有支援(async pipe)。而Vue需要vue-rx等第三方庫支援。Angular2的元件有shadow dom的實現可以選擇，而Vue目前還沒有。
4. 測試Angular2一開始就設計好了如何對元件進行測試，而Vue元件雖然也很好寫測試，但是沒有官方推薦的唯一標準（當然，對檢視是否需要測試還有待探討）。除此以外，Angular2還有一些小功能比如檢驗模板的型別安全（即，模板裡能在編譯器保證沒有引用model未定義的變數），不過AoT本身似乎還沒有穩定，所以不能算優勢。對TS的支援也是Angular好，當然前提是你喜歡TS。總體而言，就是Angular2裡你能想到的都有了，你沒想到的它也有了。框架的全面性是難以撼動的。（當然，為此也付出了相當的代價）。
5.編碼實戰
6.擴充套件思考
面對眾多的框架，我們該如何進行選擇？
遇到ng1的時候，我到處宣揚jQuery太落後了，我們有jqLite就是為了幹掉jQuery。
遇到React的時候，我到處宣揚ng1太落後了，狂黑ng1的效能和圍繞$scope的一些設計缺陷。
遇到Vue的時候，我到處宣揚React太死板了，不允許任何的魔法，而Vue有恰到好處，精心設計的魔法。
遇到Elm的時候，我到處宣揚React的Redux是抄襲者，Vue過於動態，狂黑因為沒有tagged union+pattern match，redux和vuex用起來都很醜。
直到有一天我一個人負責了一個巨型的專案，既有茫茫多的CURD，又有狀態複雜的特殊介面。
這個專案前端是用react + nuclear.js(那時還沒有redux)寫的。
在寫CURD時懷念雙向繫結，寫onChange/value寫的想砸鍵盤。
在寫狀態複雜的介面時讚歎React+Nuclear.js組合純函式+外接state簡直是神器，避免了無數個bug。
在程式碼堆成山的時候會想如果我用的是強型別的Elm是不是可以避免90%的低階錯誤？
完成這個專案之後，我再也不會去捧或黑了。設計是優雅還是愚蠢，其實取決於使用場景。 你用的每個框架都有秒殺別人的地方，也都會有用起來很傻的狀況。
不談具體專案講哪個有優勢純屬耍流氓。
7.參考文獻
http://blog.csdn.net/u012125579/article/details/52744093
https://www.zhihu.com/question/40975678
https://www.zhihu.com/question/22284218
8.更多討論
1.Angular1存在哪些問題？
繫結， 一不小心， 綁太多了，能卡死的頁面半天出不來
2.angular1和angular2有什麼不同？
1.0.X升級到1.2.X，貌似有比較大的調整，沒有完美相容低版本，升級之後可能會導致一個相容性的BUG
3.angular對seo友好嗎？
對seo不是特別友好
更多內容，可以加入IT交流群565734203與大家一起討論交流
這裡是技能樹·IT修真院：http://www.jsnhu.com，初學者轉行到網際網路的聚集地