這才是 Angular2 的靈魂！

1. 背景介紹：Angular1.x與Angular2

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

Angular 剛一發布就引起了強烈的關注，它首次提出的“雙向數據綁定”的概念受到了眾多開發者的喜愛。當然，也有很多人對此持有保留意見。但是無論如何，Angular 所提出來的眾多獨創性的概念深深影響了 Web 技術的發展進程。例如，當前市面上相當多的 Web 框架都已經支持“數據綁定”的概念，有一些支持單向綁定，有一些支持雙向綁定，Angular 的影響力之強大可見一斑。

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

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

目前，Angular2 已經處于正式發布之前的最后準備階段，按照既定的時間表，本月底（2016-09）Angular2 將會發布第一個正式版本。Angular2 依然保持了最初的核心設計理念，但是與 Angular 1.x 相比，在各種語法細節上發生了大幅度的修改。

詳細的情況在后面的第三小節“ Angular2 有哪些重要變化？”中解釋。從整體上看，Angular2 變得更加簡潔，因為它的核心概念只有一個， 那就是追求徹底的“組件化（Component）”。

2. 每一門框架都有一個核心靈魂

當我們談論 Spring 的時候，你腦海里一定會自動跳出 IOC、DI 這樣的概念。顯然，“控制反轉”、“依賴注入”就是 Spring 的核心靈魂。

當我們談論 Hibernate 或者 Mybatis 的時候，你首先想到的一定是 ORM（實體關系映射），它解決了關系模型和 OO 模型之間的數據結構映射問題。

當我們談論 jQuery 的時候，你想到的一定是 DOM 操作以及網絡上無數的開源控件。很顯然，DOM 操作就是 jQuery 的核心靈魂，它幫我們屏蔽了瀏覽器兼容性問題，并且提供了業務開發過程中所需要的各種UI控件。

 

當我們談論 Angular 1.x 的時候，你想到了什么？呃，等一等，想到的東西有點多，有時候什么都想不起來。概念龐雜而無法把握，這就是 Angular 1.x 存在的最大問題。

 

每一個成功的框架都會有一個核心靈魂，這個核心靈魂必須能解決實際開發中的一個痛點。既然是核心靈魂，最好有且只有一個，否則就會給使用者帶來很大的學習壓力。在這一方面，Angular1.x 是一個反面教材。

因為它的特性比較多，其中最核心的4大特性分別是：

• 模塊化

• MVC

• 雙向數據綁定

• 指令

 

如果再加上一些瑣碎的細節，如 $scope、臟值檢測、依賴注入、路由、表單校驗等等，整體上給人的感覺就是過于瑣碎，沒有一個核心靈魂能統攝一切。

 

Angular 團隊也意識到了這一點，因此，Angular2 在設計之初就簡化了整體的概念模型。 Angular2 的核心靈魂只有一個，那就是組件化（Component） ，而其它那些細碎的東西，比如 Service、Route、Pipe，都是 utils 而已。因此，在使用 Angular2 的時候，開發者只要學會使用 Coponent 就解決了一大半問題。

大道至簡，LESS is MORE。

 

3. Angular2 有哪些重要變化？

有了 Component 這個統攝全局的概念之后，我們來看看與 Angular 1.x 相比 Angular2 發生了什么變化。

 

第一點：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 的前景將會一片光明。這一優勢是大量的同類技術框架根本無法企及的，因此大家在做技術選型的過程中需要綜合考慮這些情況作出理性的決策。

 

第七點：Angular 1.x 和 Angular2 都自帶 UI 控件庫

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

針對 Angular 1.x 的 Material Design 實現請參考以下鏈接：

https://github.com/angular/material。

針對 Angular2 的 Material Design 庫，目前已經處于 alpha 狀態，預計在本月（2016－09）底發布第一個正式版本，更多詳情請參考：

https://github.com/angular/material2。

在現代 Web 應用開發中，尤其企業應用場景下，UI控件庫是必不可少的組成部分。無論框架的設計理念多么前衛，我們最終都必須面對真實的業務開發，這里最大的現實就是：不可能讓每一個企業或者團隊都維護一套自己 UI 組件庫。

我們知道開發一套能完美兼容各種屏幕的 UI 組件庫需要消耗大量的時間和金錢，而長期維護這樣一套體系更是無比枯燥的任務。所以說，Angular 默認提供免費的UI組件庫這一點是目前市面上很多同類的技術所無法比擬的。

 

 

4. 我從哪里開始學習 Angular2？

 

Ok，Angular2 很強大，我很想上手實踐一下，那么應該從哪里開始呢？

首先推薦 github 上的一系列新手項目，Angular 團隊也編寫了很多入門級的例子。在這些項目里面，由于運行環境的問題，有很多配置文件不太正確，導致很多開發者下載之后無法運行。我在原項目的基礎之上整理并修改了一些配置錯誤，目的是降低國內開發者的學習成本，請參考以下鏈接：

1. 基于 angular.io上 官方的 tutorial 實例修改而來：

https://github.com/damoqiongqiu/angular-tutorial-damoqiongqiu

 

2. Angular2 種子項目，修改并增加了一些內容：

https://github.com/damoqiongqiu/angular2-seed-cn

 

3. 從零開始學習 webpack

目前有非常多的前端項目都在使用 webpack 作為構建工具，包括 Angular2。這個項目分了6個 branch，從 lesson01 到 lesson06，難度從易到難，詳情請參考以下鏈接：

https://github.com/damoqiongqiu/learn-webpack

5. 總結

Angular1.x 將會繼續演進并長期維護，包括 AM1.x（Angular Material 1.x）；同時，Angular2，包括 AM2.0（Angular Material 2.0）即將正式發布，Angular2 將是又一個歷史性的版本，敬請期待。

 

Y4OTk2Mg==&mid=2652039368&idx=1&sn=9a04a5610f96dfc220621fca2a322740