AngularJS2.0 教程系列（一）

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