原文鏈接：https://www.infoq.com/articles/Angular2-TypeScript-High-Level-Overview
作者： Yakov Fain Posted on Apr 26, 2016
------------------------------------------------------------------------------------------------------------------------------
AngularJS是目前最流行的可用於創建網頁應用的javascript框架。而且現在Angular2和TypeScript正在讓真正的面向對象開發方式的成為網頁開發的主流方式，而且在語法上與Java 8驚人的相似。
根據Google工程總監Brad Green介紹， 有130萬開發人員在使用AngularJS且有30萬開發人員已經准備好開始使用Angular2了。 在使用了Angular2將近十個月之后，我相信其對javascript社區的影響將能媲美Spring框架對於Java社區的影響。
在這篇文章中，我將會展示一個關於Angular2框架的簡要概述。
在2014年末，google宣布Angular2將會對AngularJS進行完全的重寫， 為了寫Angular2的應用程序，他們甚至創建了一個全新的語言“AtScript”。
但同時， 微軟答應要對他們的TypeScript語言（一個嚴格類型的Javascriptz超集語言）增加對裝飾（亦稱注釋）的支持，這就為開發Angular2框架誕生了一個新語言，並且這是一門使用AngularJS框架開發應用的推薦語言。
你當然也可以用Javascript（ECMAScript5和6都可以）和Dart開發Angular 2應用。
此外，Angular團隊集成了另一個微軟的項目到Angular2框架中-- RxJS庫，一個原生Javascript的擴展類庫。
Angular2不是一個MVC框架，而是一個基於組件化的框架。在Angluar2種，應用是一個松散耦合的組件樹。
舉個栗子，下面這個截圖展示了一個示例在線拍賣應用的登陸頁面， 該頁面是由導航欄、搜索框、輪轉展示區、產品和底部這些組件組合而成的最初原型。
上面這張圖片演示了3個產品呈現組件。自動呈現功能是通過在模板上綁定一個從服務端獲取數據的組件數組。 每個產品的title是一個關聯到產品詳情頁的鏈接。既然我們想將拍賣系統設計為一個單頁面應用（SPA），我們就不希望為了展示產品詳情而刷新整個頁面。讓我們重復利用現在被輪轉區和產品列表占用的區域，它也可以用來呈現產品詳情同時保持頁面的其他區域不變。這個任務可以通過簡單的幾步完成：
1. 用Angular的路由-出口指令，這允許你將被輪轉區和產品列表占用的區域定義為《路由出口》， 以便它可以通過用戶的導航欄來改變內容。
2. 將輪轉區和產品組件封裝到主頁組件里
3. 新建一個產品詳情組件
4. 配置Angular的路由讓其在特定的《路由出口》區域顯示主頁或產品詳情組件。
我們已經說了很多關於組件的內容，但我們還沒有明確定義什么是組件。在TypeScript中，一個組件就是一個簡單的通過@Component關鍵字注釋的類：
1 @Component({ 2 selector: 'auction-home', 3 template: ` 4 HTML or other markup is in-lined here 5 ` 6 }) 7 export default class HomeComponent { 8 9 // Application logic goes here 10 }
@component注釋是用來定義組件和相關的元數據的。 在這個例子中，selector屬性的值定義了用於展現該組件的HTML標簽名。template屬性是HTML（或其他）標記的占位符。
回到我們的拍賣登陸頁面，最高級別的應用組件模板看起來應該像是這樣的：
這個模板由標准和自定義的html標簽混合而成，自定義HTML標簽標識各個組件。在例子中我們把html縱向排列了。如果我們希望把標記存儲在不同的文件中（在這個例子中是application.html)， 我們可以使用templateURL屬性代替template屬性， 然后ApplicationComponent的代碼就會像這樣：
import {Component} from 'angular2/core';
import {Route, RouteConfig, RouterOutlet} from 'angular2/router';
import HomeComponent from '../home/home';
import NavbarComponent from '../navbar/navbar';
import FooterComponent from '../footer/footer';
import SearchComponent from '../search/search';
import ProductDetailComponent from "../product-detail/product-detail";
@Component({
selector: 'auction-application',
templateUrl: 'app/components/application/application.html',
directives: [
RouterOutlet,
NavbarComponent,
FooterComponent,
SearchComponent,
HomeComponent
]
})
@RouteConfig([
{path: '/', component: HomeComponent, as: 'Home'},
{path: '/products/:id', component: ProductDetailComponent, as: 'ProductDetail'}
])
export default class ApplicationComponent {}
ApplicationComponent類使用了@Component和@RouteConfig（用於標記為URL依賴內容）進行注釋。selector屬性的值會被用來指定用戶自定義的HTML標簽<auction-application>。 templateURL屬性指定了標記的位置。section指令包含了路由出口和所有子級組件。
@RouteConfig注釋為客戶端導航欄配置了兩個路由：
· 名字為Home（主頁）的路由節點的內容會被HomeComponenet組件渲染並映射到URL片段'/' 下。
· 名字為ProductDetail（產品詳情）的路由節點會被ProductDetailComponent組件映射到URL片段'/product:id'下。
當用戶點擊一個特定的產品標題時，默認Home路由節點的內容會被ProductDetail路由節點的內容替換，該點擊事件會提供參數id的值並將產品詳情展示在路由出口區域。 例如，用於導航到ProductDetail路由節點的鏈接，帶有一個產品ID參數，且值為1234， 看起來可以像下面這樣：
<a [routerLink]="['/ProductDetail', {'prodId': 1234}]">{{ product.id }}</a>
依賴注入
組件們使用服務來實現業務邏輯。服務就是些由Angular實例化並注入到組件中的類。
export class ProductService { products: Product[] = []; getProducts(): Array<Product> { // The code to retrieve product into goes here return products; } }
現在如果你將一個類型是ProductService的變量以參數形式傳入到HomeComponent的構造器中，Angular會自動實例化並注入該服務到該組件中：
@Component{ ... } export default class HomeComponent { products: Product[] = []; constructor(productService: ProductService) { this.products = productService.getProducts(); } }
Angular的依賴注入模型是很靈活的，它很容易使用， 因為對象都只能通過構造器進行注入。注入器可以形成一個層（每個組件都有一個注入器），並且可注入對象不需要在應用級別被實現為單例模式，因為它默認就是單例的，就像在Spring中一樣。
組件間通信
組件間通信可以並且應該以松耦合的方式來實現。 一個組件可以定義輸入和輸出屬性。要從父組件傳輸數據給子組件， 父組件需要綁定子組件的輸入屬性的值。子組件不需要知道是誰提供了這些值，它只需要知道怎么使用這些值。
如果一個組件需要將數據傳輸給外界，它通過輸出屬性往外發送事件。 發送給誰？ 這個組件就不用管了。 對該事件感興趣的組件會對該自定義組件的事件創建偵聽器。
這種機制允許我們將組件看作黑盒，我們可以把值傳進去或發出來。我最近錄制了一段可能對你有用的短片，該短片演示了在Angular2中實現中間人設計模式的一種方法。
為什么用TypeScript
TypeScript是Javascript的一個超集， 但又像Java一樣允許你定義新的類型。 通過類型定義變量，而不是依然用原本的var關鍵字為新工具的支持開后門，你會發現這是一個巨大的生產力的提高。TypeScript帶來了一個靜態代碼分析器，當你輸入代碼到你的可識別TypeScript的編輯器（如WebStorm/IntelliJ Idea，Visual Studio Code， Sublime Text等等） 對上下文敏感的智能提示功能會引導你給函數傳入有效的參數，如讓參數使用有效的對象或類型。如果你偶然使用了不正確的類型，編輯器會將錯誤的代碼高亮顯示。在這里看看WebStorm是如何支持TypeScript的.
即使你的TypeScript應用使用了第三方類庫來編寫Javascript，你也可以設置一個類型定義文件（使用.d.ts后綴名），包含該類庫的類型定義。數百個流行的Javascript類庫的類型定義文件可以免費獲得，你可以很容易的通過Typings安裝他們， Typings是一個TypeScript的定義管理工具。 想象一下你想要在你的TypeScript代碼中使用jQuery（用Javascript編寫）。jQuery的類型定義文件會包含所有jQuery的APIs定義（包含類型），所以你的IDE就可以提示你需要用哪些類型，或把錯誤的代碼高亮。
性能和渲染
渲染性能在Angular2種得到了答復提高。最重要的是，事實上， 渲染模塊已經位於一個獨立的模塊當中，該模塊允許你在工作線程中運行運算量較大的代碼。可以訪問重繪速度挑戰網站來比較各個框架的渲染性能。你能感受到不斷更新的巨大數據網格的高速渲染。運行標題為“DBMON Angular 2.0測試版-網絡工作者"的測試用例，一個包含大量數據的網格不斷的刷新數據（在獨立的線程中）並在瀏覽器中進行極快速的重繪。
如果你想問是什么功能讓Angular2從其他框架中脫穎而出，出現在我的清單中的第一位將會是模板渲染的分區的獨立模塊：
· 具有組件界面定義的獨立模板文件會通過一個獨立的渲染器進行處理，這為模板的優化和預編譯領域提供了新的機會，讓其具有創建模板並渲染在不同的設備上的能力。
· zone.js模塊會偵聽應用的改變，並決定什么時候去更新每個組件的界面。 任何異步事件的觸發都會重新驗證每個組件的界面而且速度快的嚇人。
注意：對於大多數應用，你不需要知道zone.js的內部原理，但如果你所在的項目需要優化一個復雜應用的界面渲染，你就需要准備好撥出一些時間去學習更多的zone的內部運作細節。
讓渲染引擎保持在一個獨立模塊中並允許第三方類庫替換原始DOM的渲染器，這能實現不依賴於瀏覽器平台的目標。例如，允許將應用代碼跨設備重用，在移動設備中，界面渲染器就將使用原生組件。 TypeScript類的代碼不需要改變，但@Component注釋的內容會包含XML或其他語言，這些內容將用於渲染原生組件。一個自定義的Angular2渲染器已經在NativeScript框架中得以實現， 該渲染器提供的服務就像在Javascript、原生iOS和安卓界面組件之間架起一座橋梁一樣。通過NativeScript你可以重用組件的代碼，而你需要做的僅僅是將模板中的HTML替換為XML。 另一個自定義界面渲染器允許使用Angular 2 with React Native，這是一種完全不同的為iOS和安卓系統創建原生（不是hybird）界面的方法。
工具集
雖然Angular2的語法和架構比AngularJS 1.X更容易理解， 但Angular2的工具集卻比后者更復雜一些。這並不讓人驚訝；畢竟你正在用一種語言寫代碼並將其編譯為另一種語言，因為所有東西都會被編譯成Javascript。
Angular CLI現在是一個承諾了會提供命令行界面的項目，它能大幅簡化各個流程，從項目最初開始到生產部署。
應用調試可以在編輯器或瀏覽器中完成。我們使用Chrome的開發者工具來進行調試。 Chrome生成出的源碼地圖允許你在瀏覽器運行Javascript時調試TypeScrip代碼。如果你更樂於調試Javascript， 這也是可以的， 因為TypeScript轉譯器會生成Javascript代碼，這就能讓別人直接去讀了。
測試和部署
Angular2自帶了一個測試庫， 該庫允許你在BDD格式下編寫測試用例。目前它僅支持Jasmine框架，但能支持更多的框架已經指日可待。我們使用Karma測試工具， 該工具允許針對不同的瀏覽器分別跑不同的測試用例。
Protractor框架允許你為你的應用編寫端到端測試用例。如果你在開發模式下加載一個簡單應用時監控你的網絡，你會看到瀏覽器下載了超過5兆（這其中有一半是模塊加載器要用到的TypeScript編譯器，叫做SystemJS）。但在運行了部署和優化腳本（我們用的是Webpack打包工具）后，這個小應用的體積可以縮小到160K（包含了Angular2框架）。我們正期待着想看看Angular CLI會如何實現生產環境的打包功能。 Angular團隊在實現離線模板編譯功能，這能讓框架的體積縮小到50Kb左右。
界面組件庫
在我寫這篇文章的時候，已經有少數幾個界面組件庫你可以在Angular2應用中使用：
· PrimeNG - 一個PrimeFaces（一個在Java服務端框架中使用的非常流行的庫）的創造者編寫的Angular2界面組件庫。
· Wijmo 5 - 一個商業的Angular 2界面組件庫。 你需要購買開發者證書才能使用它。
· Polymer - 一個Google開發的可擴展的非常漂亮的組件庫。 在我們公司我們已經設法使用Polymer組件庫創建一個Angular2的飛行員應用，但在兩者的整合上還有提升的空間。
· Material Design 2 - 一個Google特別為了Angular2開發的界面組件庫。 目前這個庫還處於雛形階段， 但是其發展得非常迅速， 而且我非常期待在未來的三到四個月內可以看到一大堆設計良好的界面組件。
· NG-Lightning - 一個Angular2的組件和指令庫， 該庫是在Lightning設計系統的CSS框架下用TypeScript寫出來的。
在內部系統中使用Angular2穩妥嗎？
從第一個公測版發布開始，我們在Farata系統使用Angular2來編寫一個真實世界項目，而且並沒有陷入任何大麻煩中， 至少沒遇到找不到解決方法的問題。
如果你想更保險一點， 可以再等多幾個月。小道消息說Angular2的RC版本（指有可能成為最終產品的候選版本）會在2016年5月的Google I/0大會上公布。
將來會發生什么？
2016年3月， 布拉德·格林通過O'Reilly在Fluent大會上發表了一次主題演講。 可以看看這次演講的視頻。 你被觸動到了嗎？ 反正我被觸動到了。
關於作者
Yakov Fain是一位住在紐約的Java擁護者，同時是IT咨詢Farata系統的合作伙伴。 他領導着 Princeton JUG組織，他也在軟件開發領域寫過很多文章和幾本書。最近他正與人共同創作《用TypeScript開發Angular 2》這本書， 這本書會在2016年6月籌備發布。Yakov經常在技術大會上發表演講，同時還教授Java和Angular2課程。 他的博客是yakovfain.com。
--------------
翻譯的不對歡迎指出。
謝謝觀看。
補上ng2的中文官網和文檔地址：
官網：https://angular.cn/
文檔：https://angular.cn/docs/ts/latest/quickstart.html
2016.08.11