Angular 入門

什麼是 Angular？

Angular 是一個基於 TypeScript 構建的框架和開發平臺。它用於建立單頁 Web 應用程式。作為一個平臺，Angular 包括：

• 一個用於構建可擴充套件 Web 應用程式的基於元件的框架
• 一套整合良好的庫，涵蓋了各種功能，包括路由、表單管理、客戶端-伺服器通訊等
• 一套開發者工具，可幫助您開發、構建、測試和更新程式碼

當您使用 Angular 構建應用程式時，您正在利用一個可以從單開發者專案擴充套件到企業級應用程式的平臺。Angular 旨在使更新儘可能簡單，因此您可以以最少的精力利用最新的開發成果。最重要的是，Angular 生態系統由超過 170 萬開發者、庫作者和內容創作者組成的多元化群體。

在您開始探索 Angular 平臺之前，您應該瞭解 Angular CLI。Angular CLI 是開發 Angular 應用程式最快、最簡單、最推薦的方式。Angular CLI 使許多工變得容易。以下是一些您會經常使用的示例命令：

您會發現 Angular CLI 是構建應用程式的寶貴工具。

您將構建什麼

本教程系列將指導您構建一個待辦事項列表應用程式。透過這個應用程式，您將學習如何使用 Angular 管理、編輯、新增、刪除和過濾專案。

預備知識

要在本地系統上安裝 Angular，您需要以下內容：

• Node.js

  Angular 需要 處於活躍 LTS 或維護 LTS 版本的 Node.js。有關特定版本要求的資訊，請參閱版本相容性頁面。

  有關安裝 Node.js 的更多資訊，請參閱 nodejs.org。如果您不確定系統上執行的是哪個版本的 Node.js，請在終端視窗中執行 node -v。

• npm 包管理器

  Angular、Angular CLI 和 Angular 應用程式依賴 npm 包來實現許多特性和功能。要下載和安裝 npm 包，您需要一個 npm 包管理器。本指南使用預設隨 Node.js 安裝的 npm 客戶端命令列介面。要檢查是否安裝了 npm 客戶端，請在終端視窗中執行 npm -v。

建立 Angular 應用程式

您可以使用 Angular CLI 在終端中執行命令，以生成、構建、測試和部署 Angular 應用程式。要全域性安裝 Angular CLI，請在終端中執行以下命令：

npm install -g @angular/cli

所有 Angular CLI 命令都以 ng 開頭，後跟您希望 CLI 執行的操作。建立一個您要構建應用程式的新目錄，並在終端中切換到該目錄。然後使用以下 ng new 命令建立一個名為 todo 的新應用程式：

ng new todo --routing=false --style=css --ssr=false

ng new 命令會建立一個最小的入門 Angular 應用程式。附加的標誌 --routing、--style 和 --ssr 定義瞭如何在應用程式中處理導航和樣式，並配置了伺服器端渲染。本教程稍後會更詳細地描述這些功能。

首次執行 ng 時，系統可能會詢問您是否要啟用終端自動補全和分析。自動補全很方便，因為在輸入 ng 命令時按 TAB 鍵會顯示可能的選項並自動補全引數。

您還可以決定是否允許將 CLI 使用情況的分析資料傳送給 Google 的 Angular 維護人員。要了解有關分析的更多資訊，請參閱Angular ng analytics CLI 文件。

要執行您的 todo 應用程式，請使用 cd 命令導航到您的新專案並執行 ng serve：

cd todo
ng serve

在瀏覽器中，導航到 https://:4200/ 即可檢視您的新入門應用程式。如果您更改任何原始檔，應用程式將自動重新載入。

在 ng serve 執行期間，開啟第二個終端選項卡或終端視窗以執行命令，而無需停止伺服器。如果您想隨時停止提供應用程式，請在執行 ng serve 命令的終端中按 Ctrl+c。

熟悉您的 Angular 應用程式

本教程重點介紹的應用程式原始檔位於 src/app 中。

src/app
├── app.component.css
├── app.component.html
├── app.component.spec.ts
├── app.component.ts
└── app.config.ts

CLI 自動生成的關鍵檔案如下：

1. app.component.ts：也稱為類，包含應用程式主頁的邏輯。
2. app.component.html：包含 AppComponent 的 HTML。此檔案的內容也稱為模板。模板決定了檢視或您在瀏覽器中看到的內容。
3. app.component.css：包含 AppComponent 的樣式。當您只想定義應用於特定元件而不是整個應用程式的樣式時，可以使用此檔案。

Angular 中的元件由三個主要部分組成：模板、樣式和類。例如，app.component.ts、app.component.html 和 app.component.css 共同構成了 AppComponent。這種結構將邏輯、檢視和樣式分開，使應用程式更易於維護和擴充套件。透過這種方式，您從一開始就採用了最佳實踐。

Angular CLI 還會生成一個用於元件測試的檔案，名為 app.component.spec.ts，但本教程不涉及測試，因此您可以忽略該檔案。每當您生成一個元件時，CLI 都會在您指定的名稱的目錄中建立這些檔案，我們稍後會看到一個示例。

要了解有關測試的更多資訊，請參閱 Angular 測試指南。

Angular 應用程式的結構

Angular 是用 TypeScript 構建的。TypeScript 是 JavaScript 的超集，這意味著任何有效的 JavaScript 都是有效的 TypeScript。TypeScript 提供型別和比純 JavaScript 更簡潔的語法，這為您提供了建立更易維護的程式碼和最大程度減少錯誤的工具。

元件是 Angular 應用程式的構建塊。元件包含一個帶有 @Component() 裝飾器的 TypeScript 類。

裝飾器

您使用 @Component() 裝飾器來指定有關類別的元資料（HTML 模板和樣式）。

類

類是您放置元件所需的任何邏輯的地方。此程式碼可以包括函式、事件監聽器、屬性以及對服務的引用等等。類位於一個名為 feature.component.ts 的檔案中，其中 feature 是您的元件名稱。因此，您可以擁有名為 header.component.ts、signup.component.ts 或 feed.component.ts 的檔案。您使用具有元資料的 @Component() 裝飾器建立元件，該元資料告訴 Angular 在哪裡可以找到 HTML 和 CSS。一個典型的元件如下所示：

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

@Component({
  selector: "app-item",
  standalone: true,
  imports: [],
  // the following metadata specifies the location of the other parts of the component
  templateUrl: "./item.component.html",
  styleUrl: "./item.component.css",
})
export class ItemComponent {
  // code goes here
}

這個元件叫做 ItemComponent，它的選擇器是 app-item。您可以像常規 HTML 標籤一樣使用選擇器，將其放置在其他模板中，即 <app-item></app-item>。當選擇器在模板中時，只要遇到選擇器的例項，瀏覽器就會渲染該元件的模板。本教程將指導您建立兩個元件並在另一個元件中使用一個。

Angular 的元件模型提供了強大的封裝和直觀的應用程式結構。元件還使您的應用程式更容易進行單元測試，並可以提高程式碼的整體可讀性。

HTML 模板

每個元件都有一個 HTML 模板，宣告該元件如何渲染。您可以內聯定義此模板，也可以透過檔案路徑定義。

要引用外部 HTML 檔案，請使用 templateUrl 屬性：

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  // code goes here
}

要編寫內聯 HTML，請使用 template 屬性並在反引號中編寫您的 HTML：

@Component({
  selector: "app-root",
  template: `<h1>To do application</h1>`,
})
export class AppComponent {
  // code goes here
}

Angular 使用附加語法擴充套件了 HTML，使您可以從元件中插入動態值。當元件的狀態更改時，Angular 會自動更新渲染的 DOM。此功能的一個用途是插入動態文字，如以下示例所示。

<h1>{{ title }}</h1>

雙花括號指示 Angular 插入其中的內容。title 的值來自元件類：

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

@Component({
  selector: "app-root",
  standalone: true,
  imports: [],
  template: "<h1>{{ title }}</h1>",
  styleUrl: "./app.component.css",
})
export class AppComponent {
  title = "To do application";
}

當應用程式載入元件及其模板時，瀏覽器會看到以下內容：

<h1>To do application</h1>

樣式

元件可以從應用程式的 styles.css 檔案繼承全域性樣式，並透過自己的樣式進行增強或覆蓋。您可以直接在 @Component() 裝飾器中編寫元件特有的樣式，或者指定 CSS 檔案的路徑。

要直接在元件裝飾器中包含樣式，請使用 styles 屬性：

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styles: ["h1 { color: red; }"],
})
export class AppComponent {
  // …
}

通常，元件使用單獨檔案中的樣式。如果需要包含多個 CSS 樣式表，可以使用 styleUrl 屬性，其值為 CSS 檔案的路徑字串；或者使用 styleUrls 屬性，其值為字串陣列：

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrl: "./app.component.css",
})
export class AppComponent {
  // …
}

透過元件特有的樣式，您可以組織 CSS，使其易於維護和移植。

獨立元件

除非專案已經使用 NgModules（Angular 模組）來組織程式碼，否則建議使元件成為獨立的。本教程使用更易於入門的獨立元件。

通常會匯入 CommonModule，以便您的元件可以使用常見的指令和管道。

import { Component } from "@angular/core";
import { CommonModule } from "@angular/common";

@Component({
  standalone: true,
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrl: "./app.component.css",
  imports: [CommonModule],
})
export class AppComponent {
  // …
}

總結

這就是 Angular 的首次介紹。至此，您應該已經設定好並準備好構建一個 Angular 應用程式，並且對 Angular 的工作原理有了基本的瞭解。在下一篇文章中，我們將深化這些知識並開始構建我們的待辦事項列表應用程式的結構。

• 概述：JavaScript 框架和庫
• 下一頁