Why Angular2
Angular1.x顯然非常成功，那么，為什么要劇烈地轉向Angular2？
性能的限制
AngularJS當初是提供給設計人員用來快速構建HTML表單的一個內部工具。隨着時間的推移，各種特性 被加入進去以適應不同場景下的應用開發。然而由於最初的架構限制（比如綁定和模板機制），性能的 提升已經非常困難了。
快速變化的WEB
在語言方面，ECMAScript6的標准已經完成，這意味着瀏覽器將很快支持例如模塊、類、lambda表達式、 generator等新的特性，而這些特性將顯著地改變JavaScript的開發體驗。
在開發模式方面，Web組件也將很快實現。然而現有的框架，包括Angular1.x對WEB組件的支持都不夠好。
移動化
想想5年前......現在的計算模式已經發生了顯著地變化，到處都是手機和平板。Angular1.x沒有針對移動 應用特別優化，並且缺少一些關鍵的特性，比如：緩存預編譯的視圖、觸控支持等。
簡單易用
說實話，Angular1.x太復雜了，學習曲線太陡峭了，這讓人望而生畏。Angular團隊希望在Angular2中將復雜性 封裝地更好一些，讓暴露出來的概念和開發接口更簡單。
Rob Eisenberg / Angular 2.0 Team
ES6工具鏈
要讓Angular2應用跑起來不是件輕松的事，因為它用了太多還不被當前主流瀏覽器支持 的技術。所以，我們需要一個工具鏈：
Angular2是面向未來的科技，要求瀏覽器支持ES6+，我們現在要嘗試的話，需要加一些 墊片來抹平當前瀏覽器與ES6的差異：
- systemjs - 通用模塊加載器，支持AMD、CommonJS、ES6等各種格式的JS模塊加載
- es6-module-loader - ES6模塊加載器，systemjs會自動加載這個模塊
- traceur - ES6轉碼器，將ES6代碼轉換為當前瀏覽器支持的ES5代碼。systemjs會自動加載 這個模塊。
初識Angular2
寫一個Angular2的Hello World應用相當簡單，分三步走：
1. 引入Angular2預定義類型
import {Component,View,bootstrap} from "angular2/angular2";
import是ES6的關鍵字，用來從模塊中引入類型定義。在這里，我們從angular2模塊庫中引入了三個類型： Component類、View類和bootstrap函數。
2. 實現一個Angular2組件
實現一個Angular2組件也很簡單，定義一個類，然后給這個類添加注解：
@Component({selector:"ez-app"})
@View({template:"<h1>Hello,Angular2</h1>"})
class EzApp{}
class也是ES6的關鍵字，用來定義一個類。@Component和@View都是給類EzApp附加的元信息， 被稱為注解/Annotation。
@Component最重要的作用是通過selector屬性（值為CSS選擇符），指定這個組件渲染到哪個DOM對象上。 @View最重要的作用是通過template屬性，指定渲染的模板。
3. 渲染組件到DOM
將組件渲染到DOM上，需要使用自舉/bootstrap函數：
bootstrap(EzApp);
這個函數的作用就是通知Angular2框架將EzApp組件渲染到DOM樹上。
簡單嗎？我知道你一定還有疑問，別着急，我們慢慢把缺失的知識點補上！
注解/Annotation
你一定好奇@Component和@View到底是怎么回事。看起來像其他語言（比如python） 的裝飾器，是這樣嗎？
ES6規范里沒有裝飾器。這其實利用了traceur的一個實驗特性：注解。給一個類 加注解，等同於設置這個類的annotations屬性：
//注解寫法 @Component({selector:"ez-app"}) class EzApp{...}
等同於:
class EzApp{...} EzApp.annotations = [new Component({selector:"ez-app"})];
很顯然，注解可以看做編譯器（traceur）層面的語法糖，但和python的裝飾器不同， 注解在編譯時僅僅被放在annotation里，編譯器並不進行解釋展開 - 這個解釋的工作是 Angular2完成的：
據稱，注解的功能就是Angular2團隊向traceur團隊提出的，這不是traceur的默認選項， 因此你看到，我們配置systemjs在使用traceur模塊時打開注解：
System.config({ map:{traceur:"lib/traceur"}, traceurOptions: {annotations: true} });
小結
如果你了解一點Angular1.x的bootstrap，可能隱約會感受到Angular2中bootstrap的一些 變化 - 我指的並非代碼形式上的變化。
以組件為核心
在Angular1.x中，bootstrap是圍繞DOM元素展開的，無論你使用ng-app還是手動執行bootstrap()函數，自舉過程是建立在DOM之上的。
而在Angular2中，bootstrap是圍繞組件開始的，你定義一個組件，然后啟動它。如果沒有一個組件， 你甚至都沒有辦法使用Angular2！
支持多種渲染引擎
以組件而非DOM為核心，意味着Angular2在內核隔離了對DOM的依賴 - DOM僅僅作為一種可選的渲染引擎存在：
上面的圖中，DOM Render已經實現，Server Render正在測試，iOS Render和Android Render 是可預料的特性，雖然我們看不到時間表。
這有點像React了。
本文為 匯智網-在線學習編程 提供，課程路徑為：http://www.hubwiz.com/course/5599d367a164dd0d75929c76/。轉發請賦原文鏈接：http://www.cnblogs.com/jasonnode/p/4666565.html