[譯]Angular2 和TypeScript -- 一次簡要的預覽

原文連接：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