版本：Angular 5.0.0-alpha

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

你是這樣編寫 Angular 應(yīng)用的：用 Angular 擴(kuò)展語法編寫 HTML 模板政溃， 用組件類管理這些模板趾访，用服務(wù)添加應(yīng)用邏輯， 用模塊打包發(fā)布組件與服務(wù)董虱。

然后扼鞋，你通過引導(dǎo)根模塊來啟動(dòng)該應(yīng)用。 Angular 在瀏覽器中接管愤诱、展現(xiàn)應(yīng)用的內(nèi)容云头，并根據(jù)我們提供的操作指令響應(yīng)用戶的交互。

當(dāng)然淫半，這只是冰山一角溃槐。后面你還會(huì)學(xué)到更多的細(xì)節(jié)。現(xiàn)在科吭，讓我們看看這張大圖昏滴。

這個(gè)架構(gòu)圖展現(xiàn)了 Angular 應(yīng)用中的 8 個(gè)主要構(gòu)造塊：

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

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

模塊

Angular 應(yīng)用是模塊化的,也就是說,Angular 應(yīng)用是由許多模塊組合而成的砌溺。

在本指南中影涉，模塊指的是一個(gè)編輯單元，比如一個(gè)庫规伐，或一個(gè)包蟹倾。如果一個(gè) dart 文件沒有 library 或 part 指令，那么這個(gè)文件本身就是一個(gè)庫猖闪，因此是一個(gè)編輯單元鲜棠。更多關(guān)于編輯單元的信息,在 dart 語言說明中查看" Libraries and Scripts "一節(jié)。

每個(gè) Angular 應(yīng)用至少有一個(gè)模塊,也就是根模塊培慌。根模塊在一些小型應(yīng)用中可能是唯一的模塊豁陆，大多數(shù)應(yīng)用會(huì)有很多特性模塊，每個(gè)模塊都是一個(gè)內(nèi)聚的代碼塊專注于某個(gè)應(yīng)用領(lǐng)域吵护、工作流或緊密相關(guān)的功能盒音。

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

// lib/app_component.dart (class)

class AppComponent {}

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

Angular 庫

Angular 是在 angular 包中提供的一組庫的集合。主要的 Angular 庫是 angular馅而，在大多數(shù)應(yīng)用模塊中像下面一樣導(dǎo)入.

import 'package:angular/angular.dart'; 

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

組件

組件 負(fù)責(zé)控制屏幕上的一小塊區(qū)域叫做視圖祥诽。

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

• 帶有導(dǎo)航鏈接的應(yīng)用根組件瓮恭。
• 英雄列表雄坪。
• 英雄編輯器。

在類中定義組件的應(yīng)用邏輯屯蹦，為視圖提供支持维哈。 組件通過一些由屬性和方法組成的 API 與視圖交互绳姨。

在下面的例子中，HeroListComponent有一個(gè)heroes屬性阔挠，它返回一個(gè)從服務(wù)獲得的英雄列表飘庄。HeroListComponent 還有一個(gè)當(dāng)用戶從列表中點(diǎn)選一個(gè)英雄時(shí)設(shè)置 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;
  }
}

當(dāng)用戶在這個(gè)應(yīng)用中漫游時(shí)，Angular 會(huì)創(chuàng)建谒亦、更新和銷毀組件竭宰。應(yīng)用可以通過生命周期鉤子在組件生命周期的各個(gè)時(shí)間點(diǎn)上插入自己的操作空郊，例如上面聲明的 ngOnInit()份招。

模板

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

多數(shù)情況下，模板看起來很像標(biāo)準(zhǔn) HTML哼审，當(dāng)然也有一點(diǎn)不同的地方谐腰。下面是 HeroListComponent 組件的一個(gè)模板：

// 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>標(biāo)簽是一個(gè)表示HeroDetailComponent新組件的自定義元素涩盾。這個(gè)新組件（代碼未顯示）用于展現(xiàn)用戶從HeroListComponent列表中選擇的特定英雄十气。HeroDetailComponent是HeroListComponent的子組件。

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

元數(shù)據(jù)

元數(shù)據(jù)告訴 Angular 如何處理一個(gè)類。

回顧HeroListComponent的代碼址儒，你會(huì)看到它只是一個(gè)類芹枷。一點(diǎn)框架的痕跡也沒有，也沒有Angular 特殊的代碼莲趣。

實(shí)際上鸳慈，HeroListComponent真的只是一個(gè)類。直到你告訴 Angular 它是一個(gè)組件喧伞。把元數(shù)據(jù)附加到這個(gè)類走芋，來告訴 Angular HeroListComponent是個(gè)組件。在 Dart 中潘鲫，使用注解附加元素?fù)?jù)翁逞。

下面就是HeroListComponent的一些元數(shù)據(jù)。@Component注解標(biāo)志著緊隨其后的類是一個(gè)組件類：

// 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注解接受參數(shù)提供給 Angular 創(chuàng)建和展示組件及其視圖所需要的信息次舌。

這個(gè)例子中HeroListComponent使用了下面@Component的參數(shù)：

• selector： CSS 選擇器熄攘，它告訴 Angular 在父級 HTML 中查找<hero-list>標(biāo)簽，創(chuàng)建并插入該組件彼念。 例如挪圾，如果應(yīng)用的 HTML 包含<hero-list></hero-list>浅萧， Angular 就會(huì)把HeroListComponent的一個(gè)實(shí)例插入到這個(gè)標(biāo)簽中。
• templateUrl： 組件 HTML 模板的模塊相對地址哲思，如上所示洼畅。
• directives: 模板所需求的組件或指令的列表。為了使 Angular 能夠處理應(yīng)用標(biāo)簽顯示在模板上,例如 <hero-detail>, 必須在directives 列表中聲明這個(gè)標(biāo)簽相應(yīng)的組件.
• providers: 組件所需服務(wù)的依賴注入提供器的列表棚赔。這是在告訴 Angular：該組件的構(gòu)造函數(shù)需要一個(gè)HeroService服務(wù)帝簇，這樣組件就可以從服務(wù)中獲得英雄列表來顯示。

@Component 里面的元數(shù)據(jù)會(huì)告訴 Angular 從哪里獲取你為組件指定的主要的構(gòu)建塊靠益。

模板丧肴、元數(shù)據(jù)和組件共同描繪出這個(gè)視圖。

其它元數(shù)據(jù)注解用類似的方式來指導(dǎo) Angular 的行為胧后。 @Injectable芋浮、@Input 和 @Output 是幾個(gè)最常用的注解。

這種架構(gòu)處理方式是：你必須向代碼中添加元數(shù)據(jù)壳快，以便 Angular 知道該怎么做纸巷。

數(shù)據(jù)綁定

如果沒有框架，我們就得自己負(fù)責(zé)把數(shù)據(jù)值推送到 HTML 控件中眶痰，并把用戶的響應(yīng)轉(zhuǎn)換成行為和值更新瘤旨。手工寫代碼來實(shí)現(xiàn)這些推/拉邏輯，枯燥乏味竖伯、容易出錯(cuò)存哲，結(jié)果往往也難以閱讀。

Angular 支持數(shù)據(jù)綁定黔夭，一種讓模板的各部分與組件的各部分相互合作的機(jī)制宏胯。往 HTML模板 中添加綁定標(biāo)記，來告訴 Angular 如何把模板和組件聯(lián)系起來本姥。

有四種形式的數(shù)據(jù)綁定語法肩袍。每種形式都有一個(gè)方向 —— 綁定到 DOM 、綁定自 DOM 以及雙向綁定婚惫。如圖所示：

HeroListComponent示例模板中包含四種數(shù)據(jù)綁定語法中的三種：

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

這里是示例中所用的三中數(shù)據(jù)綁定語法:

• {{hero.name}}插值表達(dá)式 在 <li> 標(biāo)簽中顯示組件的 hero.name 屬性的值氛赐。
• [hero]屬性綁定 把父組件 HeroListComponent 的 selectedHero 的值傳到子組件 HeroDetailComponent 的 hero屬性中。
• (click) 事件綁定 在用戶點(diǎn)擊英雄的名字時(shí)調(diào)用組件的 selectHero 方法先舷。

第四種數(shù)據(jù)綁定形式是雙向數(shù)據(jù)綁定艰管，雙向數(shù)據(jù)綁定使用ngModel指令結(jié)合了屬性綁定和事件綁定到一個(gè)符號。在雙向綁定中蒋川，數(shù)據(jù)屬性值通過屬性綁定從組件流到輸入框荆几。用戶的修改通過事件綁定流回組件跟啤，把屬性值設(shè)置為最新的值谣蠢。

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

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

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

Angular 在每個(gè) JavaScript 事件循環(huán)中處理所有的數(shù)據(jù)綁定，從應(yīng)用組件樹的根到所有的子組件夕冲。

數(shù)據(jù)綁定在模板與對應(yīng)組件的交互中扮演了重要的角色.

數(shù)據(jù)綁定在父、子組件間的通訊中也同樣重要歹鱼。

指令

Angular 模板是動(dòng)態(tài)的掺涛。當(dāng) Angular 渲染它們時(shí)颠悬，它會(huì)根據(jù)指令提供的說明對 DOM 進(jìn)行轉(zhuǎn)換。

指令是一個(gè)帶有 @Directive 注解的類。組件是一個(gè)帶模板的指令既们；@Component注解實(shí)際上就是一個(gè)擴(kuò)展了面向模板特性的@Directive注解婴氮。

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

有兩種其它類型的指令：結(jié)構(gòu)型 和屬性型 指令。

它們往往像屬性一樣出現(xiàn)在元素標(biāo)簽中方仿， 偶爾會(huì)以名字的形式出現(xiàn)厂汗，但多數(shù)時(shí)候還是作為賦值目標(biāo)或綁定目標(biāo)出現(xiàn)贾节。

結(jié)構(gòu)型指令通過在 DOM 中添加祈争、移除和替換元素來修改布局墨吓。

下面的示例模板中用到了兩個(gè)內(nèi)置的結(jié)構(gòu)型指令：

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

<li *ngFor="let hero of heroes"></li>
<hero-detail *ngIf="selectedHero != null"></hero-detail>

• *ngFor告訴 Angular 為heroes列表中的每個(gè)hero生成一個(gè)<li>標(biāo)簽帖烘。
• *ngIf表示只有在選擇的英雄存在時(shí)亮曹，才會(huì)包含HeroDetail組件。

在 Dart 中，只有 boolean 值是true的才是 true照卦，其他所有的值都是 false式矫。javascript 和TypeScript 相比之下，把值如 1 和一些非空對象當(dāng)作true役耕。為此采转，js 和 Ts 版本的 上段代碼只使用 selectedHero 作為*ngIf表達(dá)式的值。Dart版本必須使用boolean 運(yùn)算符瞬痘，譬如 !=代替故慈。

屬性型指令修改一個(gè)現(xiàn)有元素的外觀或行為。 在模板中框全，它們看起來就像是標(biāo)準(zhǔn)的 HTML 屬性察绷，因此而得名。

ngModel指令就是屬性型指令的一個(gè)例子津辩，它實(shí)現(xiàn)了雙向數(shù)據(jù)綁定拆撼。ngModel通過設(shè)置其顯示屬性值，并響應(yīng) change 事件來修改現(xiàn)有元素（一般是<input>）的行為喘沿。

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

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

Angular 還有少量的其它指令闸度，它們或者修改結(jié)構(gòu)布局（例如 ngSwitch）， 或者修改 DOM 元素和組件的各個(gè)方面（例如 ngStyle和 ngClass）摹恨。

當(dāng)然筋岛，我們也能編寫自己的指令。像 HeroListComponent 這樣的組件就是一種自定義指令晒哄。自定義結(jié)構(gòu)指令中講的是另一種。

服務(wù)

服務(wù) 是一個(gè)廣義范疇肪获，包括：值寝凌、函數(shù)，或應(yīng)用所需的特性孝赫。

幾乎任何東西都可以是一個(gè)服務(wù)较木。 典型的服務(wù)是一個(gè)類，具有專注的青柄、明確的用途伐债。它應(yīng)該做一件特定的事情，并把它做好致开。
例如：

• 日志服務(wù)
• 數(shù)據(jù)服務(wù)
• 消息總線
• 稅款計(jì)算器
• 應(yīng)用程序配置

服務(wù)沒有什么特別屬于 Angular 的特性峰锁。 Angular 對于服務(wù)也沒有什么定義。 它甚至都沒有定義服務(wù)的基類双戳，也沒有地方注冊一個(gè)服務(wù)虹蒋。即便如此，服務(wù)仍然是任何 Angular 應(yīng)用的基礎(chǔ)。組件就是最大的服務(wù)消費(fèi)者魄衅。

下面是一個(gè)服務(wù)類的示例峭竣，用于把日志記錄到瀏覽器的控制臺(tái)：

// 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類，使用一個(gè) Future來獲取英雄晃虫。HeroService還依賴于Logger服務(wù)和另一個(gè)用于處理服務(wù)器通訊的BackendService服務(wù)皆撩。

// 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;
  }
}

服務(wù)無處不在。

組件類應(yīng)保持精簡哲银。它們不從服務(wù)器獲得數(shù)據(jù)毅访、不驗(yàn)證用戶輸入，也不直接往控制臺(tái)寫日志盘榨。組件的任務(wù)就是提供用戶體驗(yàn)喻粹，僅此而已。它介于視圖（由模板渲染）和應(yīng)用邏輯（通常包括模型的某些概念）之間草巡。一個(gè)好的組件為數(shù)據(jù)綁定提供屬性和方法守呜，把其它瑣事都委托給服務(wù)。

Angular 不會(huì)強(qiáng)制要求我們遵循這些原則山憨。假如你使用 3000 行代碼寫了一個(gè)組件來完成應(yīng)用的所有事情查乒，它也不會(huì)抱怨什么。

Angular 通過輕易地把應(yīng)用邏輯拆分到服務(wù)郁竟，并通過依賴注入使這些服務(wù)在組件中可用來幫助你遵循這些原則玛迄。

依賴注入

依賴注入 是提供類的新實(shí)例的一種方式，還負(fù)責(zé)處理好類所需的全部依賴棚亩。大多數(shù)依賴都是服務(wù)蓖议。Angular 使用依賴注入來提供新組件以及組件所需的服務(wù)。

Angular 通過查看構(gòu)造函數(shù)的參數(shù)類型得知組件需要哪些服務(wù)讥蟆。 例如勒虾，HeroListComponent組件的構(gòu)造函數(shù)需要一個(gè)HeroService服務(wù)：

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

final HeroService _heroService;

HeroListComponent(this._heroService);

當(dāng) Angular 創(chuàng)建組件時(shí)，會(huì)首先為組件所需的服務(wù)請求一個(gè)注入器 (injector)瘸彤。注入器維護(hù)了一個(gè)服務(wù)實(shí)例的容器修然，存放著以前創(chuàng)建的實(shí)例。 如果所請求的服務(wù)實(shí)例不在容器中质况，注入器就會(huì)創(chuàng)建一個(gè)服務(wù)實(shí)例愕宋，并且添加到容器中，然后把這個(gè)服務(wù)返回給 Angular结榄。當(dāng)所有請求的服務(wù)都被解析完并返回時(shí)中贝，Angular 會(huì)以這些服務(wù)為參數(shù)去調(diào)用組件的構(gòu)造函數(shù)。這就是依賴注入潭陪。

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

如果注入器還沒有HeroService雄妥，它怎么知道該如何創(chuàng)建一個(gè)呢最蕾？

簡單的說，必須使用注入器注冊一個(gè)HeroService的 提供器(Provider)老厌。提供器可以創(chuàng)建或返回一個(gè)服務(wù)瘟则，通常就是服務(wù)類本身。

你可以使用一個(gè)組件或應(yīng)用啟動(dòng)時(shí)的根注入器注冊提供器枝秤。

使用組件注冊提供器

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

// lib/app_component.dart (providers)

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

把提供器注冊在組件級表示該組件的每一個(gè)新實(shí)例都會(huì)有一個(gè)服務(wù)的新實(shí)例醋拧。通過組件提供的服務(wù)是被應(yīng)用組件樹的所有后代共享的。

使用根注入器注冊提供器

使用根注入器注冊提供器比較不常見淀弹，詳情請看依賴注入的注冊一個(gè)服務(wù)提供器部分丹壕。

需要記住的關(guān)于依賴注入的要點(diǎn)是：

• 依賴注入滲透在整個(gè) Angular 框架中，被到處使用薇溃。
• 注入器 (injector) 是本機(jī)制的核心菌赖。
  • 注入器負(fù)責(zé)維護(hù)一個(gè)容器，用于存放它創(chuàng)建過的服務(wù)實(shí)例沐序。
  • 注入器能從提供器創(chuàng)建一個(gè)新的服務(wù)實(shí)例琉用。
• 提供器是一個(gè)用于創(chuàng)建服務(wù)的配方。
• 使用注入器注冊提供器策幼。

總結(jié)

我們學(xué)到的這些只是關(guān)于 Angular 應(yīng)用程序的八個(gè)主要構(gòu)造塊的基礎(chǔ)知識：

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

這是 Angular 應(yīng)用程序中所有其它東西的基礎(chǔ)邑时，要使用 Angular，以這些作為開端就綽綽有余了特姐。 但它仍然沒有包含我們需要知道的全部晶丘。

這里是一個(gè)簡短的、按字母排序的列表唐含，列出了其它重要的 Angular 特性和服務(wù)浅浮。

• 表單：通過基于 HTML 的驗(yàn)證和臟檢查機(jī)制支持復(fù)雜的數(shù)據(jù)輸入場景。
  *HTTP：通過 HTTP 客戶端觉壶，可以與服務(wù)器通訊脑题，以獲得數(shù)據(jù)、保存數(shù)據(jù)和觸發(fā)服務(wù)端動(dòng)作铜靶。
• 生命周期鉤子：通過實(shí)現(xiàn)生命周期鉤子接口，可以切入組件生命中的幾個(gè)關(guān)鍵點(diǎn)：從創(chuàng)建到銷毀他炊。
• 管道：在模板中使用管道轉(zhuǎn)換成用于顯示的值争剿，以增強(qiáng)用戶體驗(yàn)。
• 路由：在應(yīng)用程序客戶端的頁面間導(dǎo)航痊末，并且不離開瀏覽器蚕苇。
• 測試：為你的應(yīng)用編寫組件測試和端到端測試。

下一步>
顯示數(shù)據(jù)