本文是 Angular 系列的第一篇，只是站在一個更高的視角來對 Angular 做一些說明和對比，文章不會涉及到任何編碼（下一篇才會涉及到編碼），只是讓各位初學者先對 Angular 有一個基本的認識，比如 Angular 是什麼？Angular 的架構是什麼樣的？Angular 提供了哪些特性等等。如有說得不對的地方歡迎大家指正。
Angular 目前有兩個比較大的版本，一個是 1.5，一個是 4.0，對於 2.0 以下的版本統稱為 AngularJS，從 2.0 版本開始稱為 Angular。
談談 AngularJS
先從 AngularJS 說起，AngularJS 是 Google 在 2012 年釋出的一個MVVM框架，提供了非常多的特性，這些特性在在當時來說是相當酷，並且大膽的，也是 AngularJS 流行的原因。
- AngularJS 優點
- 雙向資料繫結
AngularJS 提供了強大的資料雙向繫結功能，再也不需要使用 JS 或者 jQuery 來操作 DOM 元素，大大減少了前端的程式碼量。 - 完善的體系，提供一整套 WEB 開發的解決方案
包括模板、資料雙向繫結、路由、指令、過濾器、模組化、服務(可複用)等特性，基本上前端需要用的東西都可以從這個框架裡面找到，減少選擇性疲勞。 - 引入後端語言的一些概念
單元測試、依賴注入等等
- AngularJS一些問題
- 效能
導致這個問題的主要原因是 AngularJS 的“雙向資料繫結”，也是很多人吐槽的一個點，“雙向資料繫結”是一把”雙刃劍“，在 AngularJS 作用域裡面的任何修改都會觸發“髒值檢測”，比如$scope.name = 'AngularJS'這段程式碼會觸發“髒值檢測”，AngularJS 會遍歷作用域裡面的所有變數，每一個變數都會被檢測是否發生改變，有變化就會把值從檢視同步到模型，或者模型到檢視的同步，如果頁面使用大量的雙向資料繫結，頁面就會可能出現卡頓現象，這個是歷史遺留的原因，這樣的做法的好處是可以相容低版本瀏覽器，比如 IE8，不過 AngularJS 1.3 開始就不再支援 IE8；雙向資料還會導致另一個問題，就是資料的流向很模糊，比如你就想把資料單向的從view同步到model，除非自己加註釋明確說明，不然關從程式碼層面是看不出，這使得程式碼的後期維護成本非常高。 - 作用域
什麼是作用域？如果我把它說成是“上下文”不知道會不會好理解一點，用過 AngularJS 的人就會發現，AngularJS 幾乎封裝了所有原生的 JS API，使用它封裝後的 API 才會觸發“髒值檢測”，比如使用原生setInterval(callback, time)定時器，不會觸發“髒值檢測”，導致開發者需要手動呼叫 AngularJS 底層的介面觸發“髒值檢測”，比如$scope.$apply()或者$scope.digest()，這兩個都是一樣的，$scope.$apply()會呼叫$scope.$digest()，因此 AngularJS 封裝了$interval服務來解決這個問題，使用原生 JS 事件，都需要這麼做。鑑於作用域的各種問題，在新版的 Angular 中，作用域（$scope）這個東西已經不復存在。 - 低配版路由
頁面只能配置一個ng-view，這讓 AngularJS 路由使用起來非常侷限，導致很多人都使用第三方路由元件 ui-route 來替代官方的 ng-route，ui-route 通過巢狀檢視來複用一些通用的部件，而第三方的 ui-route 個人覺得也不是很好用，別人的東西用起來就是不爽。新版 Angular 的路由已經解決了這個問題。 - JS 語言本身
靈活又有很多坑的語言，又愛又恨難捨難分，網上有很多人討論過 JavaScript，口水戰也不少；Angular 選擇使用微軟的 TypeScript，TypeScript 是 JavaScript 的超集，是 JavaScript 的強型別版本，可以編譯成 JavaScript，編譯器將會去掉 JavaScript 本身沒有的東西，所以 TypeScript 並不依賴於瀏覽器的支援，也並不會帶來相容性問題。與 TypeScript 結合之後，使 Angular 更加適合開發大型專案。 - 表單
AngularJS 對於表單的校驗和錯誤訊息提示能力非常薄弱，Angular 提供了非常完善的表單校驗和訊息提示功能，比如 Angular 提供了響應式表單。 - 學習成本
AngularJS 存在非常多的概念，模組、控制器、模板、過濾器、服務、元件、指令、雙向資料繫結、作用域、依賴注入等，這些對於初學者很不友好，而且你還很難準確指出 AngularJS 的核心是什麼，如果談到 React 的核心是什麼，很多人很容易就會想到“虛擬 DOM”、“元件”。新版的 Angular 的核心就是元件，語法上使用一種更加優雅的裝飾器註解來整合程式碼。
Angular 特性
- AngularCLI命令列工具
開發者可以使用這個工具來快速搭建一個專案的腳手架，熟悉 Vue 的人就會知道 vue-cli，功能類似，只不過 AngularCLI 做得更加徹底，AngularCLI 建立的程式碼骨架包辦了專案的執行、構建、打包、程式碼風格檢測、測試等，統一約定所有的配置，而 vue-cli 在這一方面會比較靈活，不能說 AngularCLI 這種方式不好，這取決不同人對不同事情的考慮。 - 服務端渲染
可以針對每個檢視做 SEO 優化。 - 移動和桌面應用相容
可以藉助 NativeScript、ReactNative 之類的框架，可以很容易地使用 Angular 開發出跨平臺的手機應用，Angular 還提供了一個官方的 UI 庫 Angular Material，可以在移動應用和桌面應用使用 Google Material 風格通用的 UI 元件。
前面已經對 AngularJS 和 Angular 做了很多對比，介紹了 Angular 的很多特性，並且針對 AngularJS 的一些問題，介紹了 Angular 的一些改進，那些特性都被之後的 Angular 繼承下來，新版的 Angular 語法更加優雅，功能更加強大。
AngularJS 與 Angular架構
前面我們已經從特性的角度對 AngularJS 和 Angular 做了很多對比了，接下來我們從架構的角度來對比。
AngularJS 架構
AngularJS 架構
AngularJS 是一個典型的 MVC 架構，使用者通過點選按鈕，輸入框等操作與檢視進行互動，這些操作會被檢視通知到控制器，控制器會修改或者查詢底層的資料模型，資料模型可能會跟伺服器產生一些互動來獲取或修改資源，最後資料模型把修改反饋到檢視，使用者可以立刻看到自己所做的這些操作和檢視反饋的結果，這就是 AngularJS 的基本架構。Angular 架構
Angular 架構
Angular 採用了完全不同的架構，Angular 整個應用就是一顆元件樹，使用者看到的是這顆元件樹上某幾個被啟用的元件檢視，使用者可以通過一些操作，從一個頁面路由到另一個頁面，使用者還可以跟檢視進行互動，這些互動由元件本身提供，元件通過依賴注入來引入一些服務來做一些操作，或者跟服務端產生一些通訊。
通過這兩張圖相信大家應該對 Angular 應用有了一個基本認識。
與其它流行框架進行對比
與 React 對比
- 速度
提到 React 的第一反應就是快，因為 React 採用了一種特別方式來操作 DOM，也就是虛擬 DOM；在效能方面，React 只會在setStaus的時候才會去更新 DOM，而且 React 是先修改虛擬 DOM，然後再與實際的 DOM 進行對比，最後再修改真實 DOM，一個是修改的內容少，一個是修改 DOM 的次數少，所以速度特別快；Angular 也實現了一個類似的變更檢測機制演算法，速度已經跟 React 不相上下。 - FLUX 架構
React 提出了 FLUX 架構 這個概念，使 React 更加專注於元件化和資料單向流更新，單向資料流使得資料的流向非常清晰，降低程式碼維護成本，而且還可以直接使用ES6語法，通過 Webpack 這樣的打包工具編譯成相容性更好的 ES5。這些以前 AngularJS 是沒有的，不過現在Angular已經全部支援了，比如資料單向繫結、元件化。 - 伺服器端渲染
SPA 的一個缺陷是對 SEO 不友好，因為搜尋引擎的爬蟲依賴的是服務端響應的內容，不會去解析 JS 再爬取頁面的內容，而 React 是可以支援伺服器端渲染，通過服務端預渲染機制動態生成頁面再返回到客戶端，這個 Angular 以前是沒有的，現在也已經支援服務端渲染。
React 的定位是一個 UI 元件庫，相當於 MVC 裡面的 V，它並不是 WEB 的解決方案，React 專注於程式碼結構和元件間通訊，開發大型專案通常需要搭配其它一些庫來使用，比如 Redux，Redux 適合多互動，多資料來源的應用場景，不然只會增加應用的複雜性，即使配套 Redux 也不能完全說是一個框架，類似 Promise 這樣的東西還需要自己找第三方實現，而 Angular 提供了一整 WEB 套解決方案，基本上不需要為了某一功能模組而去使用第三方實現，而如果你只需要專注於 UI層，那麼 React 是一個非常好的選擇。
與 Vue 對比
Vue 是由國內的大牛 尤雨溪 開發，並由 Vue 團隊維護的一個框架，中文文件支援完善；Vue 官網已經有與 Angular2 對比的介紹，無論從檔案大小、上手難度、執行效率，Vue 都略優於 Angular， 還有人已經在 Github 基於一些基準，測試了很多主流 JavaScript 框架的操作時間 ，這裡我只是針對個人主觀的想法來對於這兩個框架的對比，很多優勢隨著時間推移會被削弱，也可能距離會被拉大。
- 簡單
Vue 的目標是通過儘可能簡單的 API 實現響應的資料繫結和組合的檢視元件，而且 Vue 是由國內的大牛尤雨奚開發的，Vue 官方中文文件 完善，這一點 Angular 直到 2.0 才慢慢完善中文文件，目前 Angular 官網中文文件 覆蓋率已經超過80%，而且還支援中英文對照。 - 效能
最新版本的 Vue 更加優越，根據上面提供的對比資料來看，Angular4 稍稍比 Vue 慢了一點點。 - 個人主導
Vue 是由國內的大牛尤雨奚主導，Angular 是由 Google 主導，個人主導的專案，對於今後專案的維護和經費開銷還有有點擔心，而這對於 Google 來說完全不是事。 - 社群
Angular 在世界上有龐大的開發者社群和配套的生態環境，Vue 目前跟 Angular 相比還是有一些差距。
Angular 和 Vue 都是非常棒的框架，都非常值得去學習的框架，雖然我很佩服 Vue 的“模仿能力“。
總結
到這裡，我們已經對比了 AngularJS 和 Angular 的特性以及闡述 Angular 針對 AngularJS 的問題做的一些改進，緊接著我們還了解了 AngularJS 和 Angular 的基本架構，最後通過與一些流行的元件庫（React）和 MVVM 框架（Vue）進行對比，來了解 Angular 的現狀，相信讀者此時已經對Angular的整體架構和特性有一個基本瞭解，在接下來的系列文章中，會逐漸剖析 Angular 的知識點，跟大家一起學習 Angular 4。