本主題會幫你了解 Angular：什么是 Angular？它有哪些優(yōu)勢？當構(gòu)建應(yīng)用時它能為你提供什么幫助？

Angular 是一個基于 TypeScript 構(gòu)建的開發(fā)平臺。它包括：

• 一個基于組件的框架，用于構(gòu)建可伸縮的 Web 應(yīng)用
• 一組完美集成的庫，涵蓋各種功能，包括路由、表單管理、客戶端-服務(wù)器通信等
• 一套開發(fā)工具，可幫助你開發(fā)、構(gòu)建、測試和更新代碼

借助 Angular，無論單人項目還是企業(yè)級應(yīng)用，你都能獲得平臺帶來的優(yōu)勢。 Angular 的設(shè)計目標之一就是讓更新更容易，因此你可以用最小的成本升級到最新的 Angular 版本。最重要的是，Angular 的生態(tài)系統(tǒng)由包括 170 萬名開發(fā)人員、庫作者和內(nèi)容創(chuàng)作者在內(nèi)的多元團隊構(gòu)成。

要試用包含本指南中代碼片段的可工作范例，請看現(xiàn)場演練 / 下載范例。

Angular 應(yīng)用：知識要點

本節(jié)會解釋 Angular 背后的核心思想。了解這些思想可以幫助你更有效地設(shè)計和構(gòu)建應(yīng)用。

組件

組件是構(gòu)成應(yīng)用的磚塊。組件包括三個部分：帶有 ?@Component()? 裝飾器的 TypeScript 類、HTML 模板和樣式文件。?@Component()? 裝飾器會指定如下 Angular 專屬信息：

• 一個 CSS 選擇器，用于定義如何在模板中使用組件。模板中與此選擇器匹配的 HTML 元素將成為該組件的實例。
• 一個 HTML 模板，用于指示 Angular 如何渲染此組件。
• 一組可選的 CSS 樣式，用于定義模板中 HTML 元素的外觀。

下面是一個最小化的 Angular 組件。

import { Component } from '@angular/core';

@Component({
  selector: 'hello-world',
  template: `
    <h2>Hello World</h2>
    <p>This is my first component!</p>
  `
})
export class HelloWorldComponent {
  // The code in this class drives the component's behavior.
}

要使用此組件，請在模板中編寫以下內(nèi)容：

<hello-world></hello-world>

當 Angular 渲染此組件時，生成的 DOM 如下所示：

<hello-world>
    <h2>Hello World</h2>
    <p>This is my first component!</p>
</hello-world>

Angular 的組件模型提供了強大的封裝能力和直觀的應(yīng)用結(jié)構(gòu)。組件還能讓你的應(yīng)用更容易進行單元測試，并可以提高代碼的整體可讀性。

模板

每個組件都有一個 HTML 模板，用于聲明該組件的渲染方式。你可以內(nèi)聯(lián)它或用文件路徑定義此模板。

Angular 使用額外的語法擴展了 HTML，使你可以從組件中插入動態(tài)值。當組件的狀態(tài)更改時，Angular 會自動更新已渲染的 DOM。此功能的應(yīng)用之一是插入動態(tài)文本，如下例子所示。

<p>{{ message }}</p>

這里 message 的值來自組件類：

import { Component } from '@angular/core';

@Component ({
  selector: 'hello-world-interpolation',
  templateUrl: './hello-world-interpolation.component.html'
})
export class HelloWorldInterpolationComponent {
    message = 'Hello, World!';
}

當應(yīng)用加載組件及其模板時，用戶將看到以下內(nèi)容：

<p>Hello, World!</p>

注意這里所用的雙花括號 —— 它們指示 Angular 對其中的內(nèi)容進行插值。

Angular 還支持屬性綁定，以幫助你設(shè)置 HTML 元素的 Property 和 Attribute 的值，并將這些值傳給應(yīng)用的展示邏輯。

<p
  [id]="sayHelloId"
  [style.color]="fontColor">
  You can set my color in the component!
</p>

注意這里所用的方括號 —— 該語法表明你正在將 Property 或 Attribute 綁定到組件類中的值。

可以聲明事件監(jiān)聽器來監(jiān)聽并響應(yīng)用戶的操作，例如按鍵、鼠標移動、單擊和觸摸等。你可以通過在圓括號中指定事件名稱來聲明一個事件監(jiān)聽器：

<button
  [disabled]="canClick"
  (click)="sayMessage()">
  Trigger alert message
</button>

前面的例子中調(diào)用了一個方法，該方法是在組件類中定義的：

sayMessage() {
  alert(this.message);
}

以下是在 Angular 模板中插值和綁定的例子：

• hello-world-bindings.component.ts

import { Component } from '@angular/core';

@Component ({
  selector: 'hello-world-bindings',
  templateUrl: './hello-world-bindings.component.html'
})
export class HelloWorldBindingsComponent {
  fontColor = 'blue';
  sayHelloId = 1;
  canClick = false;
  message = 'Hello, World';

  sayMessage() {
    alert(this.message);
  }

}

• hello-world-bindings.component.html

<button
  [disabled]="canClick"
  (click)="sayMessage()">
  Trigger alert message
</button>
<p
  [id]="sayHelloId"
  [style.color]="fontColor">
  You can set my color in the component!
</p>
<p>My color is {{ fontColor }}</p>

可以用指令來為模板添加額外功能。 Angular 中最常用的指令是 ?*ngIf? 和 ?*ngFor? 。你可以使用指令執(zhí)行各種任務(wù)，例如動態(tài)修改 DOM 結(jié)構(gòu)。你還可以用自定義指令來創(chuàng)建出色的用戶體驗。

以下代碼是 ?*ngIf? 指令的例子。

• hello-world-ngif.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'hello-world-ngif',
  templateUrl: './hello-world-ngif.component.html'
})
export class HelloWorldNgIfComponent {
  message = "I'm read only!";
  canEdit = false;

  onEditClick() {
    this.canEdit = !this.canEdit;
    if (this.canEdit) {
      this.message = 'You can edit me!';
    } else {
      this.message = "I'm read only!";
    }
  }
}

• hello-world-ngif.component.html

<h2>Hello World: ngIf!</h2>

<button (click)="onEditClick()">Make text editable!</button>

<div *ngIf="canEdit; else noEdit">
    <p>You can edit the following paragraph.</p>
</div>

<ng-template #noEdit>
    <p>The following paragraph is read only. Try clicking the button!</p>
</ng-template>

<p [contentEditable]="canEdit">{{ message }}</p>

Angular 的聲明式模板使讓可以將應(yīng)用的邏輯和外觀完全分開。模板基于標準 HTML，因此易于構(gòu)建、維護和更新。

依賴注入

依賴注入讓你可以聲明 TypeScript 類的依賴項，而無需操心如何實例化它們，Angular 會為你處理這些瑣事。這種設(shè)計模式能讓你寫出更加可測試、也更靈活的代碼。盡管了解依賴注入對于開始用 Angular 并不是至關(guān)重要的事，但我們還是強烈建議你將其作為最佳實踐，并且 Angular 自身的方方面面都在一定程度上利用了它。

為了說明依賴注入的工作原理，請考慮以下例子。第一個文件 ?logger.service.ts? 中定義了一個 ?Logger ?類。它包含一個 ?writeCount ?函數(shù)，該函數(shù)將一個數(shù)字記錄到控制臺。

import { Injectable } from '@angular/core';

@Injectable({providedIn: 'root'})
export class Logger {
  writeCount(count: number) {
    console.warn(count);
  }
}

接下來，?hello-world-di.component.ts? 文件中定義了一個 Angular 組件。該組件包含一個按鈕，它會使用此 Logger 類的 ?writeCount ?函數(shù)。要訪問此功能，可通過向構(gòu)造函數(shù)中添加 ?private logger: Logger? 來把 ?Logger ?服務(wù)注入到 ?HelloWorldDI ?類中。

import { Component } from '@angular/core';
import { Logger } from '../logger.service';

@Component({
  selector: 'hello-world-di',
  templateUrl: './hello-world-di.component.html'
})
export class HelloWorldDependencyInjectionComponent  {
  count = 0;

  constructor(private logger: Logger) { }

  onLogMe() {
    this.logger.writeCount(this.count);
    this.count++;
  }
}

Angular CLI

Angular CLI 是開發(fā) Angular 應(yīng)用的最快、最簡單和推薦的方式。Angular CLI 能簡化許多任務(wù)。

你會發(fā)現(xiàn) Angular CLI 是構(gòu)建應(yīng)用的寶貴工具。

自帶庫

“Angular 應(yīng)用：知識要點”部分提供了構(gòu)建 Angular 應(yīng)用時要用到的幾個關(guān)鍵架構(gòu)元素的簡要描述。但是，當你的應(yīng)用不斷成長并且想要添加其他功能（例如站點導(dǎo)航或用戶輸入）時，Angular 的許多優(yōu)勢才會真正顯現(xiàn)出來。屆時，你可以通過 Angular 平臺，來引入 Angular 所提供的眾多自帶庫之一。

你可以使用的一些庫包括：

這些庫在擴展應(yīng)用功能的同時，還能讓你將更多精力放在那些令你的應(yīng)用與眾不同的功能上。你可以添加這些庫，并相信它們能與 Angular 框架無縫集成并同步更新。

只有當它們可以幫你向應(yīng)用中添加功能或解決特定的問題時，你才需要這些庫。