Angular 4 系列（一）初識 Angular

本文是 Angular 系列的第一篇，只是站在一個更高的視角來對 Angular 作一些說明和對比，文章不會涉及到任何編碼（下一篇纔會涉及到編碼），只是讓各位初學者先對 Angular 有一個基本的認識，好比 Angular 是什麼？Angular 的架構是什麼樣的？Angular 提供了哪些特性等等。若有說得不對的地方歡迎你們指正。

• 談談 AngularJS
• Angular 特性
• AngularJS 與 Angular 架構
• 與其它流行框架進行對比
  • 與 React 對比
  • 與 Vue 對比
• 總結

Angular 目前有兩個比較大的版本，一個是 1.5，一個是 4.0，對於 2.0 如下的版本統稱爲 AngularJS，從 2.0 版本開始稱爲 Angular。

談談 AngularJS

先從 AngularJS 提及，AngularJS 是 Google 在 2012 年發佈的一個MVVM框架，提供了很是多的特性，這些特性在在當時來講是至關酷，而且大膽的，也是 AngularJS 流行的緣由。

• AngularJS 優勢

1. 雙向數據綁定
   AngularJS 提供了強大的數據雙向綁定功能，不再須要使用 JS 或者 jQuery 來操做 DOM 元素，大大減小了前端的代碼量。
2. 完善的體系，提供一整套 WEB 開發的解決方案
   包括模板、數據雙向綁定、路由、指令、過濾器、模塊化、服務(可複用)等特性，基本上前端須要用的東西均可以從這個框架裏面找到，減小選擇性疲勞。
3. 引入後端語言的一些概念
   單元測試、依賴注入等等

• AngularJS一些問題

1. 性能
   致使這個問題的主要緣由是 AngularJS 的「雙向數據綁定」，也是不少人吐槽的一個點，「雙向數據綁定」是一把」雙刃劍「，在 AngularJS 做用域裏面的任何修改都會觸發「髒值檢測」，好比$scope.name = 'AngularJS'這段代碼會觸發「髒值檢測」，AngularJS 會遍歷做用域裏面的全部變量，每個變量都會被檢測是否發生改變，有變化就會把值從視圖同步到模型，或者模型到視圖的同步，若是頁面使用大量的雙向數據綁定，頁面就會可能出現卡頓現象，這個是歷史遺留的緣由，這樣的作法的好處是能夠兼容低版本瀏覽器，好比 IE8，不過 AngularJS 1.3 開始就再也不支持 IE8；雙向數據還會致使另外一個問題，就是數據的流向很模糊，好比你就想把數據單向的從view同步到model，除非本身加註釋明確說明，否則關從代碼層面是看不出，這使得代碼的後期維護成本很是高。
2. 做用域
   什麼是做用域？若是我把它說成是「上下文」不知道會不會好理解一點，用過 AngularJS 的人就會發現，AngularJS 幾乎封裝了全部原生的 JS API，使用它封裝後的 API 纔會觸發「髒值檢測」，好比使用原生setInterval(callback, time)定時器，不會觸發「髒值檢測」，致使開發者須要手動調用 AngularJS 底層的接口觸發「髒值檢測」，好比$scope.$apply()或者 $scope.digest()，這兩個都是同樣的，$scope.$apply()會調用 $scope.$digest()，所以 AngularJS 封裝了$interval服務來解決這個問題，使用原生 JS 事件，都須要這麼作。鑑於做用域的各類問題，在新版的 Angular 中，做用域（$scope）這個東西已經不復存在。
3. 低配版路由
   頁面只能配置一個 ng-view，這讓 AngularJS 路由使用起來很是侷限，致使不少人都使用第三方路由組件 ui-route 來替代官方的 ng-route，ui-route 經過嵌套視圖來複用一些通用的部件，而第三方的 ui-route 我的以爲也不是很好用，別人的東西用起來就是不爽。新版 Angular 的路由已經解決了這個問題。
4. JS 語言自己
   靈活又有不少坑的語言，又愛又恨難捨難分，網上有不少人討論過 JavaScript，口水戰也很多；Angular 選擇使用微軟的 TypeScript，TypeScript 是 JavaScript 的超集，是 JavaScript 的強類型版本，能夠編譯成 JavaScript，編譯器將會去掉 JavaScript 自己沒有的東西，因此 TypeScript 並不依賴於瀏覽器的支持，也並不會帶來兼容性問題。與 TypeScript 結合以後，使 Angular 更加適合開發大型項目。
5. 表單
   AngularJS 對於表單的校驗和錯誤消息提示能力很是薄弱，Angular 提供了很是完善的表單校驗和消息提示功能，好比 Angular 提供了響應式表單。
6. 學習成本
   AngularJS 存在很是多的概念，模塊、控制器、模板、過濾器、服務、組件、指令、雙向數據綁定、做用域、依賴注入等，這些對於初學者很不友好，並且你還很難準確指出 AngularJS 的核心是什麼，若是談到 React 的核心是什麼，不少人很容易就會想到「虛擬 DOM」、「組件」。新版的 Angular 的核心就是組件，語法上使用一種更加優雅的裝飾器註解來整合代碼。

Angular 特性

1. AngularCLI命令行工具
   開發者可使用這個工具來快速搭建一個項目的腳手架，熟悉 Vue 的人就會知道 vue-cli，功能相似，只不過 AngularCLI 作得更加完全，AngularCLI 建立的代碼骨架包辦了項目的運行、構建、打包、代碼風格檢測、測試等，統一約定全部的配置，而 vue-cli 在這一方面會比較靈活，不能說 AngularCLI 這種方式很差，這取決不一樣人對不一樣事情的考慮。
2. 服務端渲染
   能夠針對每一個視圖作 SEO 優化。
3. 移動和桌面應用兼容
   能夠藉助 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。