1.組件

組件負責控制屏幕上的一小塊區域，我們稱之為視圖。
例如，下列視圖都是由組件控制的：

• 帶有導航鏈接的應用根組件。
• 英雄列表。
• 英雄編輯器
  我們在類中定義組件的應用邏輯，為視圖提供支持。 組件通過一些由屬性和方法組成的 API 與視圖交互。
  例如，HeroListComponent有一個heroes屬性，它返回一個英雄數組，這個數組從一個服務獲得。 HeroListComponent還有一個selectHero()方法，當用戶從列表中點選一個英雄時，就把它/她設置到selectedHero屬性。
  
  2017-07-12_235345.jpg
  
  當用戶在這個應用中漫游時， Angular 會創建、更新和銷毀組件。 應用可以通過生命周期鉤子在組件生命周期的各個時間點上插入自己的操作，例如上面聲明的ngOnInit()
  。

2.模版

我們通過組件的自帶的模板來定義組件視圖。模板以 HTML 形式存在，告訴 Angular 如何渲染組件。
多數情況下，模板看起來很像標準 HTML，當然也有一點不同的地方。下面是HeroListComponent組件的一個模板：

2017-07-12_235520.jpg

模板除了可以使用像 h2和p
這樣的典型的 HTML 元素，還能使用其它元素。 例如，像*ngFor{{hero.name}}、(click)、[hero]和<hero-detail>這樣的代碼使用了 Angular 的模板語法。
在模板的最后一行，<hero-detail>標簽就是一個用來表示新組件HeroDetailComponent的自定義元素。
HeroDetailComponent跟以前見到過的HeroListComponent是不同的組件。 HeroDetailComponent（代碼未顯示）用于展現一個特定英雄的情況，這個英雄是用戶從HeroListComponent列表中選擇的。 HeroDetailComponent是HeroListComponent的子組件。

component-tree.png

注意到了嗎？<hero-detail>舒適地躺在原生 HTML 元素之間。 自定義組件和原生 HTML 在同一布局中融合得天衣無縫。

3.元數據

元數據告訴 Angular 如何處理一個類。
回頭看看HeroListComponent就會明白：它只是一個類。 一點框架的痕跡也沒有，里面完全沒有出現 "Angular" 的字樣。
實際上，HeroListComponent真的只是一個類。直到我們告訴 Angular 它是一個組件。
要告訴 Angular HeroListComponent是個組件，只要把元數據附加到這個類。
在TypeScript中，我們用**裝飾器 (decorator) **來附加元數據。 下面就是HeroListComponent的一些元數據。

2017-07-13_000132.jpg

這里看到@Component裝飾器，它把緊隨其后的類標記成了組件類。
@Component裝飾器能接受一個配置對象， Angular 會基于這些信息創建和展示組件及其視圖。
@Component的配置項包括：

• selector： CSS 選擇器，它告訴 Angular 在父級 HTML 中查找<hero-list>標簽，創建并插入該組件。 例如，如果應用的 HTML 包含<hero-list></hero-list>， Angular 就會把HeroListComponent的一個實例插入到這個標簽中。
• templateUrl：組件 HTML 模板的模塊相對地址，如前所示。
• providers - 組件所需服務的依賴注入提供商數組。 這是在告訴 Angular：該組件的構造函數需要一個HeroService服務，這樣組件就可以從服務中獲得英雄數據。
  @Component里面的元數據會告訴 Angular 從哪里獲取你為組件指定的主要的構建塊。
  模板、元數據和組件共同描繪出這個視圖。
  其它元數據裝飾器用類似的方式來指導 Angular 的行為。 例如@Injectable、@Input和@Output等是一些最常用的裝飾器。

4.數據綁定

如果沒有框架，我們就得自己把數據值推送到 HTML 控件中，并把用戶的反饋轉換成動作和值更新。 如果手工寫代碼來實現這些推/拉邏輯，肯定會枯燥乏味、容易出錯，讀起來簡直是噩夢 —— 寫過 jQuery 的程序員大概都對此深有體會。

databinding.png

Angular 支持數據綁定，一種讓模板的各部分與組件的各部分相互合作的機制。 我們往模板 HTML 中添加綁定標記，來告訴 Angular 如何把二者聯系起來。
如圖所示，數據綁定的語法有四種形式。每種形式都有一個方向 —— 綁定到 DOM 、綁定自 DOM 以及雙向綁定。
HeroListComponent示例模板中有三種形式：

2017-07-13_001634.jpg

• {{hero.name}}[*插值表達式(https://www.angular.cn/docs/ts/latest/guide/displaying-data.html#interpolation)在<li>標簽中顯示組件的hero.name屬性的值。
• [hero]屬性綁定把父組件HeroListComponent的selectedHero的值傳到子組件HeroDetailComponent的hero屬性中。
• (click) 事件綁定在用戶點擊英雄的名字時調用組件的selectHero
  方法。

雙向數據綁定是重要的第四種綁定形式，它使用ngModel指令組合了屬性綁定和事件綁定的功能。 下面是HeroDetailComponent模板的范例：

<input [(ngModel)]="hero.name">
在雙向綁定中，數據屬性值通過屬性綁定從組件流到輸入框。用戶的修改通過事件綁定流回組件，把屬性值設置為最新的值。
Angular 在每個 JavaScript 事件循環中處理所有的數據綁定，它會從組件樹的根部開始，遞歸處理全部子組件。

數據綁定

父/子綁定

5.指令 (directive)

Angular 模板是動態的。當 Angular 渲染它們時，它會根據指令提供的操作對 DOM 進行轉換。
組件是一個帶模板的指令；@Component裝飾器實際上就是一個@Directive裝飾器，只是擴展了一些面向模板的特性。
雖然嚴格來說組件就是一個指令，但是組件非常獨特，并在 Angular 中位于中心地位，所以在架構概覽中，我們把組件從指令中獨立了出來。還有兩種其它類型的指令：結構型指令和屬性 (attribute) 型指令。
它們往往像屬性 (attribute) 一樣出現在元素標簽中， 偶爾會以名字的形式出現，但多數時候還是作為賦值目標或綁定目標出現。
結構型指令通過在 DOM 中添加、移除和替換元素來修改布局。
下面的范例模板中用到了兩個內置的結構型指令：

2017-07-13_002700.jpg

[ngFor(https://www.angular.cn/docs/ts/latest/guide/displayingdata.html#ngFor)告訴 Angular 為heroes列表中的每個英雄生成一個li標簽。
[ngIf](https://www.angular.cn/docs/ts/latest/guide/displaying-data.html#ngIf)表示只有在選擇的英雄存在時，才會包含HeroDetail
組件。
屬性型 指令修改一個現有元素的外觀或行為。 在模板中，它們看起來就像是標準的 HTML 屬性，故名
ngModel指令就是屬性型指令的一個例子，它實現了雙向數據綁定。 ngModel修改現有元素（一般是<input>）的行為：設置其顯示屬性值，并響應 change 事件。
<input [(ngModel)]="hero.name">
Angular 還有少量指令，它們或者修改結構布局（例如 ngSwitch）， 或者修改 DOM 元素和組件的各個方面（例如 ngStyle和 ngClass）。
當然，我們也能編寫自己的指令。像HeroListComponent這樣的組件就是一種自定義指令。

6.服務

服務是一個廣義范疇，包括：值、函數，或應用所需的特性。
幾乎任何東西都可以是一個服務。 典型的服務是一個類，具有專注的、明確的用途。它應該做一件特定的事情，并把它做好。

• 日志服務
• 數據服務
• 消息總線
• 稅款計算器
• 應用程序配置
  服務沒有什么特別屬于 Angular 的特性。 Angular 對于服務也沒有什么定義。 它甚至都沒有定義服務的基類，也沒有地方注冊一個服務。
  即便如此，服務仍然是任何 Angular 應用的基礎。組件就是最大的服務消費者。
  下面是一個服務類的范例，用于把日志記錄到瀏覽器的控制臺：
  
  2017-07-13_003703.jpg
  
  下面是HeroService類，用于獲取英雄數據，并通過一個已解析的承諾 (Promise) 返回它們。
  HeroService還依賴于Logger服務和另一個用于處理服務器通訊BackendService服務。
  
  2017-07-13_003717.jpg
  
  組件類應保持精簡。組件本身不從服務器獲得數據、不進行驗證輸入，也不直接往控制臺寫日志。 它們把這些任務委托給服務。
  組件的任務就是提供用戶體驗，僅此而已。它介于視圖（由模板渲染）和應用邏輯（通常包括模型的某些概念）之間。 設計良好的組件為數據綁定提供屬性和方法，把其它瑣事都委托給服務。
  Angular 不會強制要求我們遵循這些原則。 即使我們花 3000 行代碼寫了一個“廚房洗碗槽”組件，它也不會抱怨什么。
  Angular 幫助我們遵循這些原則 —— 它讓我們能輕易地把應用邏輯拆分到服務，并通過依賴注入來在組件中使用這些服務。

7.依賴注入

“依賴注入”是提供類的新實例的一種方式，還負責處理好類所需的全部依賴。大多數依賴都是服務。 Angular 使用依賴注入來提供新組件以及組件所需的服務。
Angular 通過查看構造函數的參數類型得知組件需要哪些服務。 例如，HeroListComponent組件的構造函數需要一個HeroService服務：
constructor(private service: HeroService) { }
當 Angular 創建組件時，會首先為組件所需的服務請求一個注入器(injector)。
注入器維護了一個服務實例的容器，存放著以前創建的實例。 如果所請求的服務實例不在容器中，注入器就會創建一個服務實例，并且添加到容器中，然后把這個服務返回給 Angular。 當所有請求的服務都被解析完并返回時，Angular 會以這些服務為參數去調用組件的構造函數。 這就是依賴注入 。
HeroService注入的過程差不多是這樣的：

injector-injects.png

如果注入器還沒有HeroService，它怎么知道該如何創建一個呢？
簡單點說，我們必須先用注入器（injector）為HeroService
注冊一個提供商（provider）。 提供商用來創建或返回服務，通常就是這個服務類本身（相當于new HeroService()）。
我們可以在模塊中或組件中注冊提供商。但通常會把提供商添加到根模塊上，以便在任何地方都使用服務的同一個實例。

2017-07-13_004458.jpg

把它注冊在組件級表示該組件的每一個新實例都會有一個服務的新實例。
需要記住的關于依賴注入的要點是：
依賴注入滲透在整個 Angular 框架中，被到處使用。

• 注入器 (injector) 是本機制的核心。
  。注入器負責維護一個容器，用于存放它創建過的服務實例。
  。注入器能使用提供商創建一個新的服務實例。
• 提供商是一個用于創建服務的配方。
• 把提供商注冊到注入器。

總結

我們學到的這些只是關于 Angular 應用程序的八個主要構造塊的基礎知識：
模塊
組件
模板
元數據
數據綁定
指令
服務
依賴注入
這是 Angular 應用程序中所有其它東西的基礎，要使用 Angular，以這些作為開端就綽綽有余了。 但它仍然沒有包含我們需要知道的全部。
這里是一個簡短的、按字母排序的列表，列出了其它重要的 Angular 特性和服務。 它們大多數已經（或即將）包括在這份開發文檔中：
動畫：用 Angular 的動畫庫讓組件動起來，而不需要對動畫技術或 CSS 有深入的了解。
變更檢測：變更檢測文檔會告訴你 Angular 是如何決定組件的屬性值變化，什么時候該更新到屏幕， 以及它是如何利用區域 (zone) 來攔截異步活動并執行變更檢測策略。
事件：事件文檔會告訴你如何使用組件和服務觸發支持發布和訂閱的事件。
表單：通過基于 HTML 的驗證和臟檢查機制支持復雜的數據輸入場景。
HTTP：通過 HTTP 客戶端，可以與服務器通訊，以獲得數據、保存數據和觸發服務端動作。
生命周期鉤子：通過實現生命周期鉤子接口，可以切入組件生命中的幾個關鍵點：從創建到銷毀。
管道：在模板中使用管道轉換成用于顯示的值，以增強用戶體驗。例如，currency
管道表達式：
price | currency:'USD':true
它把價格“42.33”顯示為$42.33
路由器：在應用程序客戶端的頁面間導航，并且不離開瀏覽器。
測試：使用 Angular 測試平臺，在你的應用部件與 Angular 框架交互時進行單元測試。