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 需要 Node.js 的活動 LTS 或維護 LTS 版本。有關特定版本要求的資訊，請參閱 版本相容性 頁面。有關安裝 Node.js 的更多資訊，請參閱 nodejs.org。如果您不確定系統上執行的 Node.js 版本，請在終端視窗中執行 node -v。
• npm 包管理器 Angular、Angular CLI 和 Angular 應用程式依賴於 npm 包 來實現許多功能。要下載和安裝 npm 包，您需要 npm 包管理器。本指南使用 npm 客戶端 命令列介面，該介面預設情況下與 Node.js 一起安裝。要檢查是否安裝了 npm 客戶端，請在終端視窗中執行 npm -v。

您可以使用 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 執行期間，開啟第二個終端選項卡或終端視窗以執行命令而不會停止伺服器。如果您想停止提供應用程式，請按 Ctrl+c 鍵，該鍵位於執行 ng serve 命令的終端中。

本教程重點介紹的應用程式原始檔位於 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 使用 TypeScript 構建。TypeScript 是 JavaScript 的超集，這意味著任何有效的 JavaScript 都是有效的 TypeScript。TypeScript 提供型別和比普通 JavaScript 更簡潔的語法，這為您提供了一種建立更易於維護的程式碼並最大程度地減少錯誤的工具。

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

使用 @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,
  // the following metadata specifies the location of the other parts of the component
  templateUrl: "./item.component.html",
  styleUrls: ["./item.component.css"],
})
export class ItemComponent {
  // code goes here
}

此元件稱為 ItemComponent，其選擇器為 app-item。您可以像使用常規 HTML 標籤一樣使用選擇器，將其放置在其他模板中，即 <app-item></app-item>。當模板中包含選擇器時，瀏覽器將在遇到選擇器例項時呈現該元件的模板。本教程將指導您建立兩個元件並在其中一箇中使用另一個元件。

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

每個元件都有一個 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,
  template: "<h1>{{ title }}</h1>",
  styleUrls: ["./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; }']
})

通常，元件使用單獨檔案中的樣式，使用 styleUrls 屬性

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

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

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

通常需要匯入 CommonModule ，這樣您的元件就可以使用常見的 指令 和 管道。本教程使用 ngFor 和 ngIf，因此我們可以確保它們可用，如下所示

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

@Component({
  standalone: true,
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  imports: [CommonModule],
})

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

• 上一個
• 概述：瞭解客戶端 JavaScript 框架
• 下一個