Angular 8 - CLI 命令

Angular CLI 幫助開發人員輕鬆快速地建立專案。正如我們已經知道的那樣，Angular CLI 工具用於開發，並且構建在 Node.js 之上，從 NPM 安裝。本章詳細解釋了 Angular 8 CLI 命令。

驗證 CLI

在轉向 Angular CLI 命令之前，我們必須確保 Angular CLI 已安裝在您的機器上。如果已安裝，您可以使用以下命令進行驗證：

ng version

您可能會看到以下響應：

如果未安裝 CLI，則使用以下命令安裝它。

npm install -g @angular/cli@^8.0.0

讓我們簡要了解一下這些命令。

新命令

要在 Angular 中建立應用程式，請使用以下語法：

ng new <project-name>

示例

如果您想建立 CustomerApp，則使用以下程式碼：

ng new CustomerApp

生成命令

它用於根據架構生成或修改檔案。在您的 Angular 專案中鍵入以下命令：

ng generate

或者，您可以簡單地將 generate 鍵入為 g。您還可以使用以下語法：

ng g

它將列出可用的架構：

讓我們在下節中瞭解一些重複使用的 ng generate 架構。

建立元件

元件是 Angular 的構建塊。要在 Angular 中建立元件，請使用以下語法：

ng g c <component-name>

例如，如果使用者想要建立一個Details元件，則使用以下程式碼：

ng g c Details

使用此命令後，您可能會看到以下響應：

CREATE src/app/details/details.component.scss (0 bytes)
CREATE src/app/details/details.component.html (22 bytes)
CREATE src/app/details/details.component.spec.ts (635 bytes)
CREATE src/app/details/details.component.ts (274 bytes)
UPDATE src/app/app.module.ts (1201 bytes)

建立類

它用於在 Angular 中建立新類。定義如下：

ng g class <class-name>

如果您想建立一個 customer 類，則鍵入以下命令：

ng g class Customer

使用此命令後，您可能會看到以下響應：

CREATE src/app/customer.spec.ts (162 bytes)
CREATE src/app/customer.ts (26 bytes)

建立管道

管道用於過濾資料。它用於在 Angular 中建立自定義管道。定義如下：

ng g pipe <pipe-name>

如果您想在一個管道中建立自定義數字計數，則鍵入以下命令：

ng g pipe DigitCount

使用此命令後，您可能會看到以下響應：

CREATE src/app/digit-count.pipe.spec.ts (204 bytes)
CREATE src/app/digit-count.pipe.ts (213 bytes)
UPDATE src/app/app.module.ts (1274 bytes)

建立指令

它用於在 Angular 中建立新指令。定義如下：

ng g directive <directive-name>

如果您想建立 UnderlineText 指令，則鍵入以下命令：

ng g directive UnderlineText

使用此命令後，您可能會看到以下響應：

CREATE src/app/underline-text.directive.spec.ts (253 bytes)
CREATE src/app/underline-text.directive.ts (155 bytes)
UPDATE src/app/app.module.ts (1371 bytes)

建立模組

它用於在 Angular 中建立新模組。定義如下：

ng g module <module-name>

如果您想建立使用者資訊模組，則鍵入以下命令：

ng g module Userinfo

使用此命令後，您可能會看到以下響應：

CREATE src/app/userinfo/userinfo.module.ts (194 bytes)

建立介面

它用於在 Angular 中建立介面。如下所示：

ng g interface <interface-name>

如果您想建立一個 customer 類，則鍵入以下命令：

ng g interface CustomerData

使用此命令後，您可能會看到以下響應：

CREATE src/app/customer-data.ts (34 bytes)

建立 Web 工作執行緒

它用於在 Angular 中建立新的 Web 工作執行緒。如下所示：

ng g webWorker <webWorker-name>

如果您想建立一個 customer 類，則鍵入以下命令：

ng g webWorker CustomerWebWorker

使用此命令後，您可能會看到以下響應：

CREATE tsconfig.worker.json (212 bytes)
CREATE src/app/customer-web-worker.worker.ts (157 bytes)
UPDATE tsconfig.app.json (296 bytes)
UPDATE angular.json (3863 bytes)

建立服務

它用於在 Angular 中建立服務。如下所示：

ng g service <service-name>

如果您想建立一個 customer 類，則鍵入以下命令：

ng g service CustomerService

使用此命令後，您可能會看到以下響應：

CREATE src/app/customer-service.service.spec.ts (379 bytes)
CREATE src/app/customer-service.service.ts (144 bytes)

建立列舉

它用於在 Angular 中建立列舉。如下所示：

ng g enum <enum-name>

如果您想建立一個 customer 類，則鍵入以下命令：

ng g enum CustomerRecords

使用此命令後，您可能會看到以下響應：

CREATE src/app/customer-records.enum.ts (32 bytes)

新增命令

它用於向您的專案新增對外部庫的支援。由以下命令指定：

ng add [name]

構建命令

它用於編譯或構建您的 Angular 應用程式。定義如下：

ng build

使用此命令後，您可能會看到以下響應：

Generating ES5 bundles for differential loading...
ES5 bundle generation complete.

配置命令

它用於在工作區的 angular.json 檔案中檢索或設定 Angular 配置值。定義如下：

ng config

使用此命令後，您可能會看到以下響應：

{
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
      "MyApp": {
         "projectType": "application",
         "schematics": {
            "@schematics/angular:component": {
               "style": "scss"
            }
         },
 .............................
 .............................

文件命令

它用於在瀏覽器中開啟官方 Angular 文件 (angular.io)，並搜尋給定的關鍵字。

ng doc <keyword>

例如，如果您使用 component 作為 ng g component 進行搜尋，則它將開啟文件。

e2e 命令

它用於構建和提供 Angular 應用程式，然後使用 Protractor 執行端到端測試。如下所示：

ng e2e <project> [options]

幫助命令

它列出可用的命令及其簡短描述。如下所示：

ng help

服務命令

它用於構建和提供您的應用程式，並在檔案更改時重新構建。如下所示：

ng serve

測試命令

在專案中執行單元測試。如下所示：

ng test

更新命令

更新您的應用程式及其依賴項。如下所示：

ng update

版本命令

顯示 Angular CLI 版本。如下所示：

ng version

列印頁面