三、AngularJS2 架構

Angular 2 應用程序應用主要由如下 8 個部分組成：

• 一、模塊 (Modules)
• 二、組件 (Components)
• 三、模板 (Templates)
• 四、元數據 (Metadata)
• 五、數據綁定 (Data Binding)
• 六、指令 (Directives)
• 七、服務 (Services)
• 八、依賴注入 (Dependency Injection)

下圖展現了每一個部分是如何相互工做的：

圖中的模板 (Templates)是由 Angular 擴展的 HTML 語法組成，組件 (Components)類用來管理這些模板，應用邏輯部分經過服務 (Services)來完成，而後在模塊中打包服務與組件，最後經過引導根模塊來啓動應用。

接下來咱們會對以上 8 個部分分開解析：

模塊

模塊又一塊代碼組成，可用於執行一個簡單的任務。

Angular 應用是由模塊化的，它有本身的模塊系統：NgModules。

每一個 Angular 應該至少要有一個模塊(根模塊)，通常能夠命名爲：AppModule。

Angular 模塊是一個帶有 @NgModule 裝飾器的類，它接收一個用來描述模塊屬性的元數據對象。

幾個重要的屬性以下：

• declarations （聲明） - 視圖類屬於這個模塊。 Angular 有三種類型的視圖類： 組件 、 指令 和 管道 。

• exports - 聲明（ declaration ）的子集，可用於其它模塊中的組件模板 。

• imports - 本模塊組件模板中須要由其它導出類的模塊。

• providers - 服務的建立者。本模塊把它們加入全局的服務表中，讓它們在應用中的任何部分均可被訪問到。

• bootstrap - 應用的主視圖，稱爲根組件，它是全部其它應用視圖的宿主。只有根模塊須要設置 bootstrap 屬性中。

一個最簡單的根模塊:

app/app.module.ts 文件：

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

接下來咱們經過引導根模塊來啓動應用，開發過程一般在 main.ts 文件中來引導 AppModule ，代碼以下：

app/app.module.ts 文件：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
 
platformBrowserDynamic().bootstrapModule(AppModule);

組件(Components)

組件是一個模板的控制類用於處理應用和邏輯頁面的視圖部分。

組件是構成 Angular 應用的基礎和核心，可用於整個應用程序中。

組件知道如何渲染本身及配置依賴注入。

組件經過一些由屬性和方法組成的 API 與視圖交互。

建立 Angular 組件的方法有三步：

• 從 @angular/core 中引入 Component 修飾器
• 創建一個普通的類，並用 @Component 修飾它
• 在 @Component 中，設置 selector 自定義標籤，以及 template 模板

模板(Templates)

Angular模板的默認語言就是HTML。

咱們能夠經過使用模板來定義組件的視圖來告訴 Angular 如何顯示組件。如下是一個簡單是實例：

<div>
網站地址 : {{site}}
</div>

在Angular中，默認使用的是雙大括號做爲插值語法，大括號中間的值一般是一個組件屬性的變量名。

元數據(Metadata)

元數據告訴 Angular 如何處理一個類。

考慮如下狀況咱們有一個組件叫做 Component ，它是一個類，直到咱們告訴 Angular 這是一個組件爲止。

你能夠把元數據附加到這個類上來告訴 Angular Component 是一個組件。

在 TypeScript 中，咱們用 裝飾器 (decorator) 來附加元數據。

實例

@Component({
   selector : 'mylist',
   template : '<h2>菜鳥教程</h2>'
   directives : [ComponentDetails]
})
export class ListComponent{...}

@Component 裝飾器能接受一個配置對象，並把緊隨其後的類標記成了組件類。

Angular 會基於這些信息建立和展現組件及其視圖。

@Component 中的配置項說明：

• selector - 一個 css 選擇器，它告訴 Angular 在 父級 HTML 中尋找一個 <mylist> 標籤，而後建立該組件，並插入此標籤中。

• templateUrl - 組件 HTML 模板的地址。

• directives - 一個數組，包含 此 模板須要依賴的組件或指令。

• providers - 一個數組，包含組件所依賴的服務所須要的依賴注入提供者。

數據綁定(Data binding)

數據綁定爲應用程序提供了一種簡單而一致的方法來顯示數據以及數據交互，它是管理應用程序裏面數值的一種機制。

經過這種機制，能夠從HTML裏面取值和賦值，使得數據的讀寫，數據的持久化操做變得更加簡單快捷。

如圖所示，數據綁定的語法有四種形式。每種形式都有一個方向——從 DOM 來、到 DOM 去、雙向，就像圖中的箭頭所示意的。

• 插值 : 在 HTML 標籤中顯示組件值。

  <h3>
  {{title}}
  <img src="{{ImageUrl}}">
  </h3>

• 屬性綁定: 把元素的屬性設置爲組件中屬性的值。

  <img [src]="userImageUrl">

• 事件綁定: 在組件方法名被點擊時觸發。

  <button (click)="onSave()">保存</button>

• 雙向綁: 使用Angular裏的NgModel指令能夠更便捷的進行雙向綁定。

  <input [value]="currentUser.firstName"
         (input)="currentUser.firstName=$event.target.value" >

指令（Directives）

Angular模板是動態的 。當 Angular 渲染它們時，它會根據指令對 DOM 進行修改。

指令是一個帶有"指令元數據"的類。在 TypeScript 中，要經過 @Directive 裝飾器把元數據附加到類上。

在Angular中包含如下三種類型的指令：

• 屬性指令：以元素的屬性形式來使用的指令。
• 結構指令：用來改變DOM樹的結構
• 組件：做爲指令的一個重要子類，組件本質上能夠看做是一個帶有模板的指令。

<li *ngFor="let site of sites"></li>
<site-detail *ngIf="selectedSite"></site-detail>

*ngFor 告訴 Angular 爲 sites 列表中的每一個項生成一個 <li> 標籤。

*ngIf 表示只有在選擇的項存在時，纔會包含 SiteDetail 組件。

服務(Services)

Angular2中的服務是封裝了某一特定功能，而且能夠經過注入的方式供他人使用的獨立模塊。

服務分爲不少種，包括：值、函數，以及應用所需的特性。

例如，多個組件中出現了重複代碼時，把重複代碼提取到服務中實現代碼複用。

如下是幾種常見的服務：

• 日誌服務
• 數據服務
• 消息總線
• 稅款計算器
• 應用程序配置

如下實例是一個日誌服務，用於把日誌記錄到瀏覽器的控制檯：

export class Logger {
  log(msg: any)   { console.log(msg); }
  error(msg: any) { console.error(msg); }
  warn(msg: any)  { console.warn(msg); }
}

依賴注入

控制反轉（Inversion of Control，縮寫爲IoC），是面向對象編程中的一種設計原則，能夠用來減低計算機代碼之間的耦合度。其中最多見的方式叫作依賴注入（Dependency Injection，簡稱DI），還有一種方式叫"依賴查找"（Dependency Lookup）。

經過控制反轉，對象在被建立的時候，由一個調控系統內全部對象的外界實體，將其所依賴的對象的引用傳遞給它。也能夠說，依賴被注入到對象中。

在傳統的開發模式中，調用者負責管理全部對象的依賴，循環依賴一直是夢魘，而在依賴注入模式中，這個管理權交給了注入器(Injector)，它在軟件運行時負責依賴對象的替換，而不是在編譯時。這種控制反轉，運行注入的特色便是依賴注入的精華所在。

Angular 能經過查看構造函數的參數類型，來得知組件須要哪些服務。 例如， SiteListComponent 組件的構造函數須要一個 SiteService:

constructor(private service: HeroService) { }

當 Angular 建立組件時，會首先爲組件所需的服務找一個注入器（ Injector ） 。

注入器是一個維護服務實例的容器，存放着之前建立的實例。

若是容器中尚未所請求的服務實例，注入器就會建立一個服務實例，而且添加到容器中，而後把這個服務返回給 Angular 。

當全部的服務都被解析完並返回時， Angular 會以這些服務爲參數去調用組件的構造函數。 這就是依賴注入 。