Angular 是什么?

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

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

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

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

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

Angular 應(yīng)用：知識(shí)要點(diǎn)

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

組件

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

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

下面是一個(gè)最小化的 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.
}

要使用此組件，請(qǐng)?jiān)谀０逯芯帉懸韵聝?nèi)容：

<hello-world></hello-world>

當(dāng) Angular 渲染此組件時(shí)，生成的 DOM 如下所示：

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

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

模板

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

Angular 使用額外的語法擴(kuò)展了 HTML，使你可以從組件中插入動(dòng)態(tài)值。當(dāng)組件的狀態(tài)更改時(shí)，Angular 會(huì)自動(dòng)更新已渲染的 DOM。此功能的應(yīng)用之一是插入動(dò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!';
}

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

<p>Hello, World!</p>

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

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

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

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

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

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

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

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ù)，例如動(dòng)態(tài)修改 DOM 結(jié)構(gòu)。你還可以用自定義指令來創(chuàng)建出色的用戶體驗(yàn)。

以下代碼是 ?*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)用的邏輯和外觀完全分開。模板基于標(biāo)準(zhǔn) HTML，因此易于構(gòu)建、維護(hù)和更新。

依賴注入

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

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

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

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

接下來，?hello-world-di.component.ts? 文件中定義了一個(gè) Angular 組件。該組件包含一個(gè)按鈕，它會(huì)使用此 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)用的最快、最簡(jiǎn)單和推薦的方式。Angular CLI 能簡(jiǎn)化許多任務(wù)。

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

自帶庫

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

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

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

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