Angular Schematics 三部曲：轻松添加自定义功能

2023-12-14 07:56:22

前言

Angular Schematics 是 Angular CLI 中的一個強大的功能，它可以讓你快速創建和客製化 Angular 專案。Schematics 可以讓你自動生成代碼、添加新功能，甚至創建新的 Angular 元件。在這個系列文章中，我們將介紹如何使用 Schematics 來創建自定義指令、自定義組件，以及如何將它們整合到你的 Angular 專案中。

什麼是 Angular Schematics？

Angular Schematics 是 Angular CLI 中的一個命令行工具，它可以讓你使用命令來生成代碼、添加新功能，甚至創建新的 Angular 元件。Schematics 的工作原理是通過讀取一個稱為「schematic」的 JSON 文件，然後根據該文件中的配置生成代碼。

Schematics 可以用於各種各樣的任務，比如：

創建新的 Angular 專案
在現有的 Angular 專案中添加新功能
創建新的 Angular 元件，如指令、組件和服務
更新 Angular 專案中的代碼
刪除 Angular 專案中的代碼

如何使用 Angular Schematics？

要使用 Angular Schematics，你需要先在你的 Angular 專案中安裝它。你可以通過以下命令來安裝 Angular Schematics：

npm install -g @angular/cli

安裝好 Angular Schematics 之後，你就可以使用它來生成代碼了。你可以通過以下命令來生成代碼：

ng generate schematic-name

其中，schematic-name 是你想要生成的代碼的類型。比如，如果你想要生成一個新的 Angular 專案，你可以使用以下命令：

ng generate project my-new-project

這將會在當前目錄中創建一個新的 Angular 專案，名為「my-new-project」。

創建自定義指令

在這個系列文章的第一篇文章中，我們將介紹如何使用 Schematics 來創建一個簡單的自定義指令。

步驟 1：創建一個新的 Schematics 專案

首先，我們需要創建一個新的 Schematics 專案。你可以通過以下命令來創建一個新的 Schematics 專案：

ng new schematics-project --schematic

這將會在當前目錄中創建一個新的 Schematics 專案，名為「schematics-project」。

步驟 2：創建一個新的 Schematic

接下來，我們需要創建一個新的 Schematic。你可以通過以下命令來創建一個新的 Schematic：

ng generate schematic my-new-schematic

這將會在「schematics-project」專案中創建一個新的 Schematic，名為「my-new-schematic」。

步驟 3：編輯 Schematic 文件

現在，我們需要編輯 Schematic 文件。Schematic 文件位於「schematics-project/src/collection.json」中。

在 Schematic 文件中，我們需要定義 Schematic 的名稱、和選項。我們還需要定義 Schematic 的工作流。工作流定義了 Schematic 如何生成代碼。

以下是 Schematic 文件的範例：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "name": "my-new-schematic",
  "description": "A simple schematic to create a new Angular directive.",
  "schematic": {
    "files": [
      {
        "path": "src/app/my-new-directive.directive.ts",
        "content": `
          import { Directive } from '@angular/core';

          @Directive({
            selector: '[appMyNewDirective]'
          })
          export class MyNewDirective { }
        `
      }
    ]
  }
}

在這個範例中，我們定義了一個名為「my-new-schematic」的 Schematic。這個 Schematic 的是「A simple schematic to create a new Angular directive.」這個 Schematic 的工作流是生成一個新的 Angular 指令，名為「MyNewDirective」。

步驟 4：運行 Schematic

現在，我們就可以運行 Schematic 了。你可以通過以下命令來運行 Schematic：

ng generate my-new-schematic

這將會在當前目錄中生成一個新的 Angular 指令，名為「MyNewDirective」。

步驟 5：測試指令

現在，我們可以測試一下指令是否工作正常。我們可以通過以下命令來測試指令：

ng serve

這將會啟動 Angular 開發伺服器。然後，我們可以在瀏覽器中打開「http://localhost:4200」來測試指令。

如果指令工作正常，我們應該可以在瀏覽器中看到「Hello, world!」字樣。

總結

在這個系列文章的第一篇文章中，我們介紹了如何使用 Angular Schematics 來創建自定義指令。我們首先創建了一個新的 Schematics 專案，然後創建了一個新的 Schematic。接下來，我們編輯了 Schematic 文件，定義了 Schematic 的名稱、描述、選項和工作流。最後，我們運行 Schematic，在當前目錄中生成了一個新的 Angular 指令。

在接下來的文章中，我們將介紹如何使用 Schematics 來創建自定義組件，以及如何將它們整合到你的 Angular 專案中。