架構

版本：Angular 5.0.0-alpha

AngularDart(本文檔中我們通常簡稱 Angular ) 是一個用 HTML 和 Dart來構建客戶端應用的框架。它發布為 Angular 包,通過Pub工具來獲取。

你是這樣編寫 Angular 應用的：用 Angular 擴展語法編寫 HTML 模板， 用組件類管理這些模板，用服務添加應用邏輯， 用模塊打包發布組件與服務。

然后，你通過引導根模塊來啟動該應用。 Angular 在瀏覽器中接管、展現應用的內容，并根據我們提供的操作指令響應用戶的交互。

當然，這只是冰山一角。后面你還會學到更多的細節。現在，讓我們看看這張大圖。

這個架構圖展現了 Angular 應用中的 8 個主要構造塊：

  • 模塊 (module)
  • 組件 (component)
  • 模板 (template)
  • 元數據 (metadata)
  • 數據綁定 (data binding)
  • 指令 (directive)
  • 服務 (service)
  • 依賴注入 (dependency injection)

本章所引用的代碼見在線示例 (查看源碼)。

模塊

Angular 應用是模塊化的,也就是說,Angular 應用是由許多模塊組合而成的。

在本指南中，模塊指的是一個編輯單元，比如一個庫，或一個包。如果一個 dart 文件沒有 library 或 part 指令，那么這個文件本身就是一個庫，因此是一個編輯單元。更多關于編輯單元的信息,在 dart 語言說明中查看" Libraries and Scripts "一節。

每個 Angular 應用至少有一個模塊,也就是根模塊。根模塊在一些小型應用中可能是唯一的模塊，大多數應用會有很多特性模塊，每個模塊都是一個內聚的代碼塊專注于某個應用領域、工作流或緊密相關的功能。

最簡單的根模塊定義了一個單一的根組件類,就像下面這個:

// lib/app_component.dart (class)

class AppComponent {}

按照慣例,根組件命名為AppComponent.

Angular 庫

Angular 是在 angular 包中提供的一組庫的集合。主要的 Angular 庫是 angular，在大多數應用模塊中像下面一樣導入.

import 'package:angular/angular.dart';

angular 包中包含了其它重要的庫,例如 angular.security.

組件

組件 負責控制屏幕上的一小塊區域叫做視圖。

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

  • 帶有導航鏈接的應用根組件。
  • 英雄列表。
  • 英雄編輯器。

在類中定義組件的應用邏輯，為視圖提供支持。 組件通過一些由屬性和方法組成的 API 與視圖交互。

在下面的例子中，HeroListComponent有一個heroes屬性，它返回一個從服務獲得的英雄列表。HeroListComponent 還有一個當用戶從列表中點選一個英雄時設置 selectedHero 屬性的 selectHero() 方法

// lib/src/hero_list_component.dart (class)

class HeroListComponent implements OnInit {
  List<Hero> heroes;
  Hero selectedHero;
  final HeroService _heroService;

  HeroListComponent(this._heroService);

  void ngOnInit() async {
    heroes = await _heroService.getAll();
  }

  void selectHero(Hero hero) {
    selectedHero = hero;
  }
}

當用戶在這個應用中漫游時，Angular 會創建、更新和銷毀組件。應用可以通過生命周期鉤子在組件生命周期的各個時間點上插入自己的操作，例如上面聲明的 ngOnInit()。

模板

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

多數情況下，模板看起來很像標準 HTML，當然也有一點不同的地方。下面是 HeroListComponent 組件的一個模板：

// lib/src/hero_list_component.html

<h2>Hero List</h2>

<p><i>Pick a hero from the list</i></p>
<ul>
  <li *ngFor="let hero of heroes" (click)="selectHero(hero)">
    {{hero.name}}
  </li>
</ul>

<hero-detail *ngIf="selectedHero != null" [hero]="selectedHero"></hero-detail>

模板使用像<h2>和p這樣典型的 HTML 元素。也包含使用了 Angular 模板語法的*ngFor, {{hero.name}}, (click), [hero], 和 <hero-detail>的代碼.

在模板的最后一行,<hero-detail>標簽是一個表示HeroDetailComponent新組件的自定義元素。這個新組件（代碼未顯示）用于展現用戶從HeroListComponent列表中選擇的特定英雄。HeroDetailComponent是HeroListComponent的子組件。

注意<hero-detail>多么自然地躺在原生 HTML 元素之間。 你可以在同一布局中混合使用自定義組件和原生 HTML。

元數據

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

回顧HeroListComponent的代碼，你會看到它只是一個類。一點框架的痕跡也沒有，也沒有Angular 特殊的代碼。

實際上，HeroListComponent真的只是一個類。直到你告訴 Angular 它是一個組件。把元數據附加到這個類，來告訴 Angular HeroListComponent是個組件。在 Dart 中，使用注解附加元素據。

下面就是HeroListComponent的一些元數據。@Component注解標志著緊隨其后的類是一個組件類：

// lib/src/hero_list_component.dart (metadata)

@Component(
  selector: 'hero-list',
  templateUrl: 'hero_list_component.html',
  directives: [coreDirectives, formDirectives, HeroDetailComponent],
  providers: [const ClassProvider(HeroService)],
)
class HeroListComponent implements OnInit {
  // ···
}

@Component注解接受參數提供給 Angular 創建和展示組件及其視圖所需要的信息。

這個例子中HeroListComponent使用了下面@Component的參數：

  • selector： CSS 選擇器，它告訴 Angular 在父級 HTML 中查找<hero-list>標簽，創建并插入該組件。 例如，如果應用的 HTML 包含<hero-list></hero-list>， Angular 就會把HeroListComponent的一個實例插入到這個標簽中。
  • templateUrl： 組件 HTML 模板的模塊相對地址，如上所示。
  • directives: 模板所需求的組件或指令的列表。為了使 Angular 能夠處理應用標簽顯示在模板上,例如 <hero-detail>, 必須在directives 列表中聲明這個標簽相應的組件.
  • providers: 組件所需服務的依賴注入提供器的列表。這是在告訴 Angular：該組件的構造函數需要一個HeroService服務，這樣組件就可以從服務中獲得英雄列表來顯示。

@Component 里面的元數據會告訴 Angular 從哪里獲取你為組件指定的主要的構建塊。

模板、元數據和組件共同描繪出這個視圖。

其它元數據注解用類似的方式來指導 Angular 的行為。 @Injectable、@Input 和 @Output 是幾個最常用的注解。

這種架構處理方式是：你必須向代碼中添加元數據，以便 Angular 知道該怎么做。

數據綁定

如果沒有框架，我們就得自己負責把數據值推送到 HTML 控件中，并把用戶的響應轉換成行為和值更新。手工寫代碼來實現這些推/拉邏輯，枯燥乏味、容易出錯，結果往往也難以閱讀。

Angular 支持數據綁定，一種讓模板的各部分與組件的各部分相互合作的機制。往 HTML模板 中添加綁定標記，來告訴 Angular 如何把模板和組件聯系起來。

有四種形式的數據綁定語法。每種形式都有一個方向 —— 綁定到 DOM 、綁定自 DOM 以及雙向綁定。如圖所示：

HeroListComponent示例模板中包含四種數據綁定語法中的三種：

<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 方法。

第四種數據綁定形式是雙向數據綁定，雙向數據綁定使用ngModel指令結合了屬性綁定和事件綁定到一個符號。在雙向綁定中，數據屬性值通過屬性綁定從組件流到輸入框。用戶的修改通過事件綁定流回組件，把屬性值設置為最新的值。

下面是在 HeroDetailComponent 模板中使用雙向綁定的示例：

// lib/src/hero_detail_component.html (ngModel)

<input [(ngModel)]="hero.name">

Angular 在每個 JavaScript 事件循環中處理所有的數據綁定，從應用組件樹的根到所有的子組件。

數據綁定在模板與對應組件的交互中扮演了重要的角色.

數據綁定在父、子組件間的通訊中也同樣重要。

指令

Angular 模板是動態的。當 Angular 渲染它們時，它會根據指令提供的說明對 DOM 進行轉換。

指令是一個帶有 @Directive 注解的類。組件是一個帶模板的指令；@Component注解實際上就是一個擴展了面向模板特性的@Directive注解。

雖然在技術上來說組件就是一個指令，但是組件非常獨特，并在 Angular 中位于中心地位，所以在架構概覽中，我們把組件從指令中獨立了出來。

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

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

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

下面的示例模板中用到了兩個內置的結構型指令：

// lib/src/hero_list_component.html (structural)

<li *ngFor="let hero of heroes"></li>
<hero-detail *ngIf="selectedHero != null"></hero-detail>
  • *ngFor告訴 Angular 為heroes列表中的每個hero生成一個<li>標簽。
  • *ngIf表示只有在選擇的英雄存在時，才會包含HeroDetail組件。

在 Dart 中，只有 boolean 值是true的才是 true，其他所有的值都是 false。javascript 和TypeScript 相比之下，把值如 1 和一些非空對象當作true。為此，js 和 Ts 版本的 上段代碼只使用 selectedHero 作為*ngIf表達式的值。Dart版本必須使用boolean 運算符，譬如 !=代替。

屬性型指令修改一個現有元素的外觀或行為。 在模板中，它們看起來就像是標準的 HTML 屬性，因此而得名。

ngModel指令就是屬性型指令的一個例子，它實現了雙向數據綁定。ngModel通過設置其顯示屬性值，并響應 change 事件來修改現有元素（一般是<input>）的行為。

// lib/src/hero_detail_component.html (ngModel)

<input [(ngModel)]="hero.name">

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

當然，我們也能編寫自己的指令。像 HeroListComponent 這樣的組件就是一種自定義指令。自定義結構指令中講的是另一種。

服務

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

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

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

服務沒有什么特別屬于 Angular 的特性。 Angular 對于服務也沒有什么定義。 它甚至都沒有定義服務的基類，也沒有地方注冊一個服務。即便如此，服務仍然是任何 Angular 應用的基礎。組件就是最大的服務消費者。

下面是一個服務類的示例，用于把日志記錄到瀏覽器的控制臺：

// lib/src/logger_service.dart (class)

class Logger {
  void log(Object msg) => window.console.log(msg);
  void error(Object msg) => window.console.error(msg);
  void warn(Object msg) => window.console.warn(msg);
}

下面是HeroService類，使用一個 Future來獲取英雄。HeroService還依賴于Logger服務和另一個用于處理服務器通訊的BackendService服務。

// lib/src/hero_service.dart (class)

class HeroService {
  final BackendService _backendService;
  final Logger _logger;
  List<Hero> heroes;

  HeroService(this._logger, this._backendService);

  Future<List<Hero>> getAll() async {
    heroes = await _backendService.getAll(Hero);
    _logger.log('Fetched ${heroes.length} heroes.');
    return heroes;
  }
}

服務無處不在。

組件類應保持精簡。它們不從服務器獲得數據、不驗證用戶輸入，也不直接往控制臺寫日志。組件的任務就是提供用戶體驗，僅此而已。它介于視圖（由模板渲染）和應用邏輯（通常包括模型的某些概念）之間。一個好的組件為數據綁定提供屬性和方法，把其它瑣事都委托給服務。

Angular 不會強制要求我們遵循這些原則。假如你使用 3000 行代碼寫了一個組件來完成應用的所有事情，它也不會抱怨什么。

Angular 通過輕易地把應用邏輯拆分到服務，并通過依賴注入使這些服務在組件中可用來幫助你遵循這些原則。

依賴注入

依賴注入 是提供類的新實例的一種方式，還負責處理好類所需的全部依賴。大多數依賴都是服務。Angular 使用依賴注入來提供新組件以及組件所需的服務。

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

// ib/src/hero_list_component.dart (constructor)

final HeroService _heroService;

HeroListComponent(this._heroService);

當 Angular 創建組件時，會首先為組件所需的服務請求一個注入器 (injector)。注入器維護了一個服務實例的容器，存放著以前創建的實例。 如果所請求的服務實例不在容器中，注入器就會創建一個服務實例，并且添加到容器中，然后把這個服務返回給 Angular。當所有請求的服務都被解析完并返回時，Angular 會以這些服務為參數去調用組件的構造函數。這就是依賴注入。

HeroService 注入的過程差不多是這樣的：

如果注入器還沒有HeroService，它怎么知道該如何創建一個呢？

簡單的說，必須使用注入器注冊一個HeroService的 提供器(Provider)。提供器可以創建或返回一個服務，通常就是服務類本身。

你可以使用一個組件或應用啟動時的根注入器注冊提供器。

使用組件注冊提供器

注冊提供器最常見的方法是在組件層使用@Component注解的providers參數：

// lib/app_component.dart (providers)

@Component(
  // ···
  providers: [
    const ClassProvider(BackendService),
    const ClassProvider(HeroService),
    const ClassProvider(Logger),
  ],
)
class AppComponent {}

把提供器注冊在組件級表示該組件的每一個新實例都會有一個服務的新實例。通過組件提供的服務是被應用組件樹的所有后代共享的。

使用根注入器注冊提供器

使用根注入器注冊提供器比較不常見，詳情請看依賴注入的注冊一個服務提供器部分。

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

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

總結

我們學到的這些只是關于 Angular 應用程序的八個主要構造塊的基礎知識：

  • 模塊 (module)
  • 組件 (component)
  • 模板 (template)
  • 元數據 (metadata)
  • 數據綁定 (data binding)
  • 指令 (directive)
  • 服務 (service)
  • 依賴注入 (dependency injection)

這是 Angular 應用程序中所有其它東西的基礎，要使用 Angular，以這些作為開端就綽綽有余了。 但它仍然沒有包含我們需要知道的全部。

這里是一個簡短的、按字母排序的列表，列出了其它重要的 Angular 特性和服務。

  • 表單：通過基于 HTML 的驗證和臟檢查機制支持復雜的數據輸入場景。
    *HTTP：通過 HTTP 客戶端，可以與服務器通訊，以獲得數據、保存數據和觸發服務端動作。
  • 生命周期鉤子：通過實現生命周期鉤子接口，可以切入組件生命中的幾個關鍵點：從創建到銷毀。
  • 管道：在模板中使用管道轉換成用于顯示的值，以增強用戶體驗。
  • 路由：在應用程序客戶端的頁面間導航，并且不離開瀏覽器。
  • 測試：為你的應用編寫組件測試和端到端測試。

下一步>
顯示數據

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Angular 2架構總覽 - 簡書http://www.lxweimin.com/p/aeb11061b82c A...
    葡萄喃喃囈語閱讀 1,504評論 2贊 13
  • Angular 2是一個幫助我們使用HTML和JavaScript構建客戶端應用的框架。這個框架包含幾個互相協作的...
    JasonQiao閱讀 7,160評論 1贊 48
  • 1.組件 組件負責控制屏幕上的一小塊區域，我們稱之為視圖。例如，下列視圖都是由組件控制的： 帶有導航鏈接的應用根組...
    不去解釋閱讀 559評論 0贊 1
  • 用angular擴展語法編寫html模板，用組件類管理這些模板，用服務添加應用邏輯，用模塊打包發布組件與服務。 以...
    shmaur閱讀 961評論 0贊 3
  • 時間過得真快轉眼間又要放假了。 這幾天都在下雨、我呢為了更好的照顧女兒所以直接沒去上班、希望女兒趕快好起來。 感賞...
    虹毅閱讀 236評論 -1贊 1