Angular 2 之一系統架構

angular 2系統架構中元件是最核心的概念，元件由元資料（metadata）、元件類（component）和模板（template）組成，其中：

元件類和模板通過資料繫結關聯：通過屬性繫結（perperty binding）在模板檢視中顯示屬性值，使用者操作模板檢視觸發事件通過事件繫結（event binding）**元件的事件處理函式。注意：系統架構僅包括angular 2核心，可選的路由、http服務未包括在內。

@component(}
`,providers: [ calcservice ],
directives: ,
pipes: ,
styles: [ ".myborder "]
})export class increase

其中：元件類class定義元件元件功能，如：

export class increase 
private onincrease(event: any) `);
}}

其中：元資料告訴angular 2如何處理類。如@component是採用typescript標註（ decorator）方式表示的元件配置資訊。typescript標註是乙個函式，將元件配置資訊轉換為附加在類定義上的元資料，angular 2在執行時根據元資料建立和顯示元件例項。

其他常用的元資料報括@injectable、@input、@output、@routeconfig等。

應用程式需要在dom中顯示內容，也需要響應使用者操作。angular 2通過以下四種資料繫結機制關聯元件模板和元件類：

angular 2使用依賴注入向類注入服務例項，以及服務例項所有的依賴例項。angular 2採用構造注入，一般地根據建構函式的引數型別確定注入例項。

angular 2可以在bootstrap函式註冊全域性provider，或者在元件定義時註冊元件級provider。如下圖所示，註冊之後在建立元件時能通過injector獲取對應的服務例項。

angular 2模板根據directive指令動態生成dom。

directive是使用@directive標註的類，分為結構型（structural）和屬性型（attribute）。系統預定義的結構型directive包括ngif、ngfor和ngswitch，屬性型directive包括ngclass、ngstyle等。directive可以自定義。

angular 2對服務沒有特殊定義；一般地，任何獨立的功能均可定義為服務。

服務主要被元件呼叫，元件通過依賴注入使用服務。乙個定義良好的元件一般地僅處理輸入屬性和事件**，其他功能均可封裝為服務。

Angular 2 之一 系統架構