Angular

一、起源和版本

1）Augular 1.x

近年來，Web 開發技術的發展日新月異，各種框架層出不窮。在這樣的大背景之下，2010年10月，Google首次釋出了自己的 Web開發框架，名為 AngularJS，也叫Angular，或者簡稱為ng。

在Angular框架中，提出很多新的思想和概念，比如受到眾多開發者喜愛和熱議的“雙向資料繫結”，在同時期以及之後的web框架中也都出現了“資料繫結”概念，包括最近大熱的React、Vue等框架。除了上述特點還有MVC、指令、模組、$scope、controller、依賴注入、路由等。

在 Google 內部有非常多的產品都在使用Angular，在國內，也有非常多的企業正在使用Angular1.x 開發自己的應用，包括移動APP，其中有很多行業巨頭。

2）Angular 2.x

Angular1.x顯然非常成功，那麼，為什麼要劇烈地轉向Angular2？

1、效能限制

AngularJS當初是提供給設計人員用來快速構建HTML表單的一個內部工具。隨著時間的推移，各種特性 被加入進去以適應不同場景下的應用開發。然而由於最初的架構限制（比如繫結和模板機制），效能的 提升已經非常困難了。

2、快速變化的WEB

在語言方面，ECMAScript6的標準已經完成，在2015年6月正式釋出了。這意味著瀏覽器將很快支援，例如：模組、類、lambda表示式、generator等新的特性，而這些特性將顯著地改變JavaScript的開發體驗。

在開發模式方面，Web元件也將很快實現。然而現有的框架，包括Angular1.x對WEB元件的支援都不夠好。

3、移動化

如今Web環境已經發生了顯著地變化，到處都是手機和平板。Angular1.x沒有針對移動 應用特別優化，並且缺少一些關鍵的特性，比如：快取預編譯的檢視、觸控支援等。

4、簡單易用

說實話，Angular1.x太複雜了，學習曲線太陡峭了，這讓人望而生畏。Angular團隊希望在Angular2中將複雜性封裝地更好一些，讓暴露出來的概念和開發介面更簡單。

Angular不只是試圖跟上，他們還推動了大量的標準的應用，增強了現有的應用架構。

2014年9月，Angular團隊在 ng-europe會議上公開宣佈了第二個大版本的開發計劃，也就是大家熟知的 Angular2，與此對應，之前的版本就稱為Angular 1.x了。

目前，Angular2已經於2016年9月正式釋出。Angular2依然保持了最初的核心設計理念，但進行了簡化。Angular2的核心靈魂只有一個，那就是元件化（Component），而其它那些細碎的東西，比如Service、Route、Pipe，都是utils 而已。

因此，在使用 Angular2 的時候，開發者只要學會使用 Coponent 就解決了一大半問題。但是與 Angular 1.x相比，在各種語法細節上發生了大幅度的修改。

大道至簡，LESS is MORE。

3）Angular 1.x 和 Angular2.x對比

有了 Component 全域性的概念之後，我們來看看與 Angular 1.x 相比Angular2 發生了什麼變化？

第一點：刪掉 $scope 作用域

在 Angular 1.x 裡面，$scope 是一個相當強大又相當可怕的東西，由於在很多需要回調的場景之下，髒值檢測機制無法感知到$scope 上發生的變化，因此經常需要開發者自己手動呼叫$apply() 方法。典型的場景有：事件回撥、setTimeout回撥、Ajax回撥等等。

Angular2 響應社群的強烈呼籲，刪除（或者說隱藏）了 $scope的概念，開發者不再需要感知到它的存在。另外，Angular2在底層引入了 zone.js，所以即使在各種回撥函式中修改資料模型也不需要手動呼叫$apply() 方法了。

第二點：刪掉了ng-controller 指令

這就意味著 Controller 不再是一個獨立的元件，它合併到了 Component 內部。這是一個非常大的演進，因為從大量的實戰經驗來看，在複雜的業務邏輯中複用Controller 幾乎是不可能的。

在其它同類的前端框架裡面也有類似的處理手法，例如 Backbone 雖然也強調 MVC 的概念，但是它也沒有定義單獨的Controller 類，Controller也是合併在 View裡面編寫的。

第三點：改進髒值檢測機制

眾所周知，“雙向資料繫結”之所以能執行，是因為Angular 底層有“髒值檢測”這麼一個神奇的機制。而實際上Angular 1.x 裡面的髒值檢測機制的執行效率非常差，這就是為什麼大家一直在抱怨繫結的物件不能太多、太深的原因。

Angular2 大幅度演進了這一機制，不僅引入了單向繫結，還增加了各種檢測策略，例如：只檢測一次、利用JIT 動態生成髒值檢測程式碼等等。毫無疑問，有了這些工具之後，資料繫結效率不再是問題。

第四點：巢狀路由

Angular 1.x 裡面有一個非常討厭的問題，框架內建的路由機制不支援巢狀使用，這就導致開發者在日常的開發過程中不得不依賴於第三方的ui-router 庫。Angular2沒有這個問題了，因為 Angular2的路由是基於 Component的，天然支援巢狀。

第五點：依賴注入機制

Angular2 中的依賴注入寫法與 Java中的註解（Annotation）非常類似，如果你熟悉Spring 註解的用法，那麼使用Angular2 的依賴注入幾乎沒有學習成本。當然，概念上是有區別的，Angular2中叫 Decorator（裝飾器），更加貼近Python 裡面的Decorator 的概念。

第六點：基於 TypeScript 開發

這是最大的一個變更，有很多人擔憂這樣是否會帶來比較大的學習成本，實際的情況並非如此。因為 TypeScript的語法與 Java 或者 C# 非常類似，因此對於從後端轉過來的開發者來說，學習這門語言幾乎是沒有難度的。

還有一個重要的方面需要大家注意：TypeScript 是 Microsoft 開發的一門語言，Google+Microsoft這樣的組合會產生多麼強大的推動力，大家可以想象。

Google 和 Microsoft本身都是重要的瀏覽器廠商，Chrome和 IE 加起來的市場份額佔據了一大半的市場份額，未來如果兩款瀏覽器內建 TypeScript引擎，很顯然 TypeScript和 Angular的前景將會一片光明。這一優勢是大量的同類技術框架根本無法企及的，因此大家在做技術選型的過程中需要綜合考慮這些情況作出理性的決策。

第七點：自帶 UI 控制元件庫

兩個版本的 UI 控制元件庫都實現了Material Design 所提出來的設計風格，Material Design是 Google提出來的一種 UI設計原則，終極的目標是：用一套 UI設計規範來相容各種各樣的裝置，例如桌面、平板、大螢幕的電視、車載系統、甚至 watch，從而保證使用者體驗的一致性。

4）Angular 4.x

為什麼有Angular1.x、Angular2.x，沒聽說有Angular3.x就直接到了Angular4.x？

根據語義化命名版本規則（參考：http://semver.org/lang/zh-CN/），此前版本中釋出的route元件破壞性升級到了3.x，所有此次就統一命名為4.x。

Angular 4 在2017年03月24日正式釋出，這裡還是先明確下官方的說法，別被angular釋出4.0正式版嚇到了。

從2.0開始angular.js已經不叫angular.js了，就叫angular（少了.js）只是版本號是2.x。而日常我們為了區別angular.js 1.x和angular的2.x的版本，稱之為angular2。

後來官網發現這樣的命名方式並不好，決定將版本號語義化（具體可以參考語義化版本 2.0.0）。但是之前route元件因為破壞性升級版本號到了3.x，為了統一版本號，直接將angular提至4.0版本，這樣才有了angular釋出了4.0正式版。

angular.js 1.x到angular2確實是一個非常大的升級，以至於api、實現原理、框架思路都是完全不一樣的。可以毫不誇張的說，學習angular2就和學一個全新的框架並沒有太大區別。

BUT！angular2.x到angular4.0破壞性升級並不多，也很容易直接升級到4.0版本。

連結：https://www.zhihu.com/question/57632772/answer/153944403

說明：本文內容根據網上資料整理而來，如有侵權請及時聯絡作者，給您帶來的不變請見諒。嚴禁轉載和用於商業用途！