**

❖❖Angular2概念–架構概覽

**

架構概覽 Architecture Overview

Angular 是一個用 HTML 和 JavaScript 或者一個可以編譯成 JavaScript 的語言（例如 Dart 或者 TypeScript ），來建構用戶端應用的架構。

該架構包括一系列庫，有些是核心庫，有些是可選庫。

我們是這樣寫 Angular 應用的：用 Angular 擴充文法編寫 HTML 模闆， 用元件類管理這些模闆，用服務添加應用邏輯， 用子產品打包釋出元件與服務。

然後，我們通過引導根子產品來啟動該應用。 Angular 在浏覽器中接管、展現應用的内容，并根據我們提供的操作指令響應使用者的互動。

具體參見

子產品 Modules

Angular 應用是子產品化的，并且 Angular 有自己的子產品系統，它被稱為 Angular 子產品或 NgModules。

Angular 子產品很重要。

每個 Angular 應用至少有一個子產品（根子產品），習慣上命名為AppModule。

根子產品在一些小型應用中可能是唯一的子產品，大多數應用會有很多特性子產品，每個子產品都是一個内聚的代碼塊專注于某個應用領域、工作流或緊密相關的功能。

Angular 子產品（無論是根子產品還是特性子產品）都是一個帶有@NgModule裝飾器的類。

NgModule是一個裝飾器函數，它接收一個用來描述子產品屬性的中繼資料對象。其中最重要的屬性是：

• declarations - 聲明本子產品中擁有的視圖類。Angular 有三種視圖類：元件、指令和管道。

• exports - declarations 的子集，可用于其它子產品的元件模闆。 imports -

  本子產品聲明的元件模闆需要的類所在的其它子產品。

• providers - 服務的建立者，并加入到全局服務清單中，可用于應用任何部分。
• bootstrap - 指定應用的主視圖（稱為根元件），它是所有其它視圖的宿主。隻有根子產品才能設定bootstrap屬性。

Angular 子產品庫 Angular libraries

Angular 提供了一組 JavaScript 子產品。可以把它們看做庫子產品。

每個 Angular 庫的名字都帶有@angular字首。

元件 Components

元件負責控制螢幕上的一小塊區域，我們稱之為視圖。

例如，下列視圖都是由元件控制的：

• 帶有導航連結的應用根元件。
• 英雄清單。
• 英雄編輯器。

中繼資料 Metadata

中繼資料告訴 Angular 如何處理一個類。

這種架構處理方式是：你向代碼中添加中繼資料，以便 Angular 知道該怎麼做。

回頭看看HeroListComponent就會明白：它隻是一個類。 一點架構的痕迹也沒有，裡面完全沒有出現 “Angular” 的字樣。

實際上，HeroListComponent真的隻是一個類。直到我們告訴 Angular 它是一個元件。

要告訴 Angular HeroListComponent是個元件，隻要把中繼資料附加到這個類。

模闆 Templates

我們通過元件的自帶的模闆來定義元件視圖。模闆以 HTML 形式存在，告訴 Angular 如何渲染元件。

模闆除了可以使用像h2和

這樣的典型的 HTML 元素，還能使用其它元素。 例如，像*ngFor、{{hero.name}}、(click)、[hero]和這樣的代碼使用了 Angular 的模闆文法。

多數情況下，模闆看起來很像标準 HTML，當然也有一點不同的地方。

資料綁定 Data binding

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

Angular 支援資料綁定，一種讓模闆的各部分與元件的各部分互相合作的機制。 我們往模闆 HTML 中添加綁定标記，來告訴 Angular 如何把二者聯系起來。As the diagram shows, there are four forms of data binding syntax. Each form has a direction — to the DOM, from the DOM, or in both directions.如圖所示，資料綁定的文法有四種形式。每種形式都有一個方向 —— 綁定到 DOM 、綁定自 DOM 以及雙向綁定。

<li>{{hero.name}}</li>
<hero-detail [hero]="selectedHero"></hero-detail>
<li (click)="selectHero(hero)"></li>
           

• {{hero.name}}插值表達式在li标簽中顯示元件的hero.name屬性的值。

• [hero]屬性綁定把父元件HeroListComponent的selectedHero的值傳到子元件

  HeroDetailComponent的hero屬性中。

• (click) 事件綁定在使用者點選英雄的名字時調用元件的selectHero方法。

在雙向綁定中，資料屬性值通過屬性綁定從元件流到輸入框。使用者的修改通過事件綁定流回元件，把屬性值設定為最新的值。

Angular 在每個 JavaScript 事件循環中處理所有的資料綁定，它會從元件樹的根部開始，遞歸處理全部子元件。

資料綁定在模闆與對應元件的互動中扮演了重要的角色。

資料綁定在父元件與子元件的通訊中也同樣重要。

指令 (directive) Directives

Angular 模闆是動态的。當 Angular 渲染它們時，它會根據指令提供的操作對 DOM 進行轉換。

元件是一個帶模闆的指令；@Component裝飾器實際上就是一個@Directive裝飾器，隻是擴充了一些面向模闆的特性。

還有兩種其它類型的指令：結構型指令和屬性 (attribute) 型指令。

它們往往像屬性 (attribute) 一樣出現在元素标簽中， 偶爾會以名字的形式出現，但多數時候還是作為指派目标或綁定目标出現。

結構型指令通過在 DOM 中添加、移除和替換元素來修改布局。

屬性型 指令修改一個現有元素的外觀或行為。 在模闆中，它們看起來就像是标準的 HTML 屬性，故名。

ngModel指令就是屬性型指令的一個例子，它實作了雙向資料綁定。 ngModel修改現有元素（一般是＜input＞）的行為：設定其顯示屬性值，并響應 change 事件。

Angular 還有少量指令，它們或者修改結構布局（例如 ngSwitch）， 或者修改 DOM 元素群組件的各個方面（例如 ngStyle和 ngClass）。

服務 Services

服務是一個廣義範疇，包括：值、函數，或應用所需的特性。

幾乎任何東西都可以是一個服務。 典型的服務是一個類，具有專注的、明确的用途。它應該做一件特定的事情，并把它做好。

例如：

- 日志服務

- 資料服務

- 消息總線

- 稅款電腦

- 應用程式配置

服務沒有什麼特别屬于 Angular 的特性。 Angular 對于服務也沒有什麼定義。 它甚至都沒有定義服務的基類，也沒有地方注冊一個服務。

即便如此，服務仍然是任何 Angular 應用的基礎。元件就是最大的服務消費者。

服務無處不在。

元件類應保持精簡。元件本身不從伺服器獲得資料、不進行驗證輸入，也不直接往控制台寫日志。 它們把這些任務委托給服務。

元件的任務就是提供使用者體驗，僅此而已。它介于視圖（由模闆渲染）和應用邏輯（通常包括模型的某些概念）之間。 設計良好的元件為資料綁定提供屬性和方法，把其它瑣事都委托給服務。

Angular 不會強制要求我們遵循這些原則。 即使我們花 3000 行代碼寫了一個“廚房洗碗槽”元件，它也不會抱怨什麼。

Angular 幫助我們遵循這些原則 —— 它讓我們能輕易地把應用邏輯拆分到服務，并通過依賴注入來在元件中使用這些服務。

依賴注入 Dependency injection

“依賴注入”是提供類的新執行個體的一種方式，還負責處理好類所需的全部依賴。大多數依賴都是服務。 Angular 使用依賴注入來提供新元件以及元件所需的服務。

Angular 通過檢視構造函數的參數類型得知元件需要哪些服務。 例如，HeroListComponent元件的構造函數需要一個HeroService服務：

通常會把提供商添加到根子產品上，以便在任何地方都使用服務的同一個執行個體。

或者，也可以在@Component中繼資料中的providers屬性中把它注冊在元件層。

需要記住的關于依賴注入的要點是：

• 依賴注入滲透在整個 Angular 架構中，被到處使用。
• 注入器 (injector) 是本機制的核心。
  • 注入器負責維護一個容器，用于存放它建立過的服務執行個體。
  • 注入器能使用提供商建立一個新的服務執行個體。
• 提供商是一個用于建立服務的配方。
• 把提供商注冊到注入器。

總結 Wrap up

這裡是一個簡短的、按字母排序的清單，列出了其它重要的 Angular 特性和服務。 它們大多數已經（或即将）包括在這份開發文檔中：

動畫：用 Angular 的動畫庫讓元件動起來，而不需要對動畫技術或 CSS 有深入的了解。

變更檢測：變更檢測文檔會告訴你 Angular 是如何決定元件的屬性值變化，什麼時候該更新到螢幕， 以及它是如何利用區域 (zone) 來攔截異步活動并執行變更檢測政策。

事件：事件文檔會告訴你如何使用元件和服務觸發支援釋出和訂閱的事件。

表單：通過基于 HTML 的驗證和髒檢查機制支援複雜的資料輸入場景。

HTTP：通過 HTTP 用戶端，可以與伺服器通訊，以獲得資料、儲存資料和觸發服務端動作。

生命周期鈎子：通過實作生命周期鈎子接口，可以切入元件生命中的幾個關鍵點：從建立到銷毀。

管道：在模闆中使用管道轉換成用于顯示的值，以增強使用者體驗。例如，currency管道表達式：

price | currency:’USD’:true

它把價格“42.33”顯示為$42.33。

路由器：在應用程式用戶端的頁面間導航，并且不離開浏覽器。

測試：使用 Angular 測試平台，在你的應用部件與 Angular 架構互動時進行單元測試。