Angular 2.0 和 1.x比較

奧斯本效應

Angular團隊面臨着這樣的問題：如何在不影響1.x版本使用的狀況下談論不少2.0的高級新功能。這就是奧斯本效應，上個世紀80年代的電腦公司，終因市場源於而歇業後命名。簡而言之，2.0版本聽起來越好，就越少有人去使用1.x版本。不一樣的是，Angular 2.0版本已經能夠從github上經過npm install angular@2.0.0-alpha.6 獲得它了。可是，這個不能用於生產，它還在被大量的修改。

Angular 1.x vs. 2.0

爲何Angular團隊會作出如此大得變化的緣由是什麼呢。Angular不僅是試圖跟上，他們還推進了大量的標準的應用，加強了現有的應用架構。

雙向數據綁定

2.0 單向數據綁定

在大型項目中，雙向數據綁定會被使用的像意大利麪條同樣。Angular 2.0引入了無迴路有向圖的單向結構概念。

這聽起來很像React的Flux所作的工做。這種結構也能夠被Angular來使用。

雖然雙向綁定會消失，Angular創始人Misko已經聲明：2.0中會有方法實現雙向綁定，雖然實現的背後數據是單向的。

觀察器

2.0：Zone.js

$scope.$watch, $scope.$apply, $timeout這些都不在須要了，這也是1.x版本有如此之大的學習曲線的緣由。

Zone.js能夠幫Angular實現變化的自動檢測。這聽起來很像React的差別比較算法。

Angular團隊解釋道，如今的變化檢測更快了，內存更小了，同時也更增強大了。變化檢測的性能可能隨着未來的object.observe的到來而有更大的提高。

Zone.js同時支持不變對象，這樣檢測的速度上會有更大的提高。這是由於編譯器會認爲數據對象不會變化從而進行優化。

組件通訊

2.0：除了$broadcast 和 $emit，2.0還有一些小得變化，1）你能夠在DOM層發送消息，而不是在scope；2）你能夠組件嵌套，而後link他們，這看上去很像每一個組件都使用它們獨立的scope。

DOM

2.0：從不少方面能夠看出，Angular 2.0對於DOM樣式的操做很像React的virtual DOM，它引用的是最近呈現的view層。關於Angular Native，Misko提到，這個view層能夠運行於web worker，甚至是native。

scope

數據將會被組織成樹形結構

Angular 2.0也會使用web組件標準。好比，shadow DOM能夠用來建立獨立的scope。Angular團隊解釋到，2.0會有一個shadow DOM模擬模塊（當前瀏覽器還不支持web組件），這將給獨立css提供新的選擇，很酷不是麼！

模塊

2.0：2.0將確定使用ES6的模塊語法。同時，2.0還但願經過懶加載來引入依賴注入。和以往經過單例方式管理不一樣的是，2.0但願使用一種層次化數據結構來提供繼承特性。你將可以控制模塊的生命週期，好比services。

指令

2.0：如今將被成爲「組件」。在1.x版本中，指令在大型項目解決衝突中隨處可見。可是在2.0中，你必須導入你的組件才能去解決初始化中得命名空間衝突問題。雖然我不明白它是如何工做的，可是2.0將會建立一個原型模板用於潛在的綁定以優化編譯器速度。

Router

2.0:雖然沒有1.x裏面不穩定的懶加載特性，但看上去應該是從1.x版本移植過來的。

Brian Ford發了一篇關於新路由的介紹，值得咱們關注下。他描述了一個新的路由如何可以同時工做於1.x和2.x版本，這就容許團隊逐漸的過分到新的版本中。他同時建議使用當前流行的ui-router來遷移地址。Ui-router很不錯，可是缺乏一些重要的特性。好比，解析只能在頁面加載以後才能傳遞參數。可是若是你想在到下個頁面以前去校驗form表單中當前的數據咋辦呢？Ui-routers的解析是一次性觸發的。相反，新的router會提供一個鉤子，容許你在制定地方作一些你想要的動做。

HTML

2.0：雖然語法看上去有些不同，可是記住，在這背後確定是有必定好的緣由的。

ng-指令

HTML中得組件被拆分魏兩種類型：(事件)和[屬性]。他們被包裝在圓括號和中括號中，這樣肉眼和機器都能識別了，從而能夠優化這兩種類型。

(事件)

(事件) 用於初始化動做.

1.x 2.0 ng-click (click) (dbl-click) ng-keyup (keyup) 

[屬性]

[屬性] 直接連接到DOM屬性中.

1.x 2.0 ng-hide [class:hidden] ng-checked [checked] 

!foreach

!foreach 是用來取代 ng-repeat.

<ul> <li !foreach="#item in itemService.items"></li> </ul> 

#item

對象的屬性加上 # 就能夠直接綁定在html上。

<input type="text" #userName /> 

{{ }}

雙大括號在2.0依然可見。看，不是啥都在變化。

組件名稱

不會再出現駱駝命名和蛇命名混淆的狀況了。如今你必須本身制定組件中得指令名稱。因爲Angular 2.0符合web組件標準，它須要-來連接名字。

@Component { selector: 'myApp-component' } 

總結

Angular 2.0版本看起來有點難以想象的。雖然尚未徹底可用於生產，可是你能夠玩一玩了。能夠在github上下載到。同時也有一些例子，好比ng2do。

若是你像下降學習曲線，那你如今能夠作以下事情：

• 嘗試看Rob Eisenbergs的新框架：Aurelia。毫無疑問，很是值得看，從中能夠學到不少關於web組件和shadow DOM的事情。

• 在Angular1.x中使用ES6-(如今多是ES2015)。這裏有不少例子關於ES6和JSPM。

• 多多學習Facebook的React.js。不少偉大的理念都是從這裏傳播出去的，好比Flux。

• 放眼一看，Angular1和2兩個版本的共同點不多。2.0版本看起來是要作完全的改變。所以有必要抽點時間去研究下心的框架，從而能夠快速的成爲專家。

點擊此處能夠看關於2.0相關視頻

原文連接：http://shmck.com/comparing-angular-1-x-2-0/