摘要：還有，運(yùn)行項(xiàng)目時(shí)，會(huì)使用或命令。指定組件歸屬的。這個(gè)是創(chuàng)建服務(wù)類的命令，支持的選項(xiàng)配置參考上面幾種命令。當(dāng)為時(shí)，會(huì)自動(dòng)創(chuàng)建對(duì)應(yīng)的路由模塊，默認(rèn)。目前對(duì)該命令的使用，只接觸到默認(rèn)配置，還不清楚一些選項(xiàng)配置的適用場(chǎng)景，后續(xù)有了解再補(bǔ)充。

聲明

本系列文章內(nèi)容梳理自以下來源：

• Angular 官方中文版教程

官方的教程，其實(shí)已經(jīng)很詳細(xì)且易懂，這里再次梳理的目的在于復(fù)習(xí)和鞏固相關(guān)知識(shí)點(diǎn)，剛開始接觸學(xué)習(xí) Angular 的還是建議以官網(wǎng)為主。

因?yàn)檫@系列文章，更多的會(huì)帶有我個(gè)人的一些理解和解讀，由于目前我也才剛開始接觸 Angular 不久，在該階段的一些理解并不一定是正確的，擔(dān)心會(huì)有所誤導(dǎo)，所以還是以官網(wǎng)為主。

正文- Angular-CLI 命令

Angular 的項(xiàng)目其實(shí)相比老舊的前端項(xiàng)目模式或者是 Vue 的項(xiàng)目來說，都會(huì)比較重一點(diǎn)，因?yàn)樗耍?模塊 @NgModel， 組件 @Component， 指令 @Directive 等各種各樣的東西，而每一種類型的 ts 文件，都需要有一些元數(shù)據(jù)的配置項(xiàng)。

這就導(dǎo)致了，如果是手工創(chuàng)建 ts 文件，需要自己編寫很多重復(fù)代碼，因此，可以借助 Angular-CLI 命令來創(chuàng)建這些文件，自動(dòng)生成所需的這些重復(fù)代碼。

而且，不僅在創(chuàng)建文件方面，在對(duì)項(xiàng)目的編譯、打包等各種操作中也需要借助 Angular-CLI。

所以，日常開發(fā)中，不管是借助 WebStrom 的圖形操作，還是直接自己使用命令方式，都需要跟 Angular-CLI 打交道，了解一些基本的配置和命令也是有好處的。

安裝的方式就不講了，要么直接使用 WebStrom 內(nèi)置的，要么借助 npm 下載一個(gè)，要么通過 WebStrom 創(chuàng)建的 Angular 項(xiàng)目的 package.json 中就會(huì)自動(dòng)配置一個(gè) cli 依賴庫(kù)。

概覽

命令格式：ng commandNameOrAlias arg [optionalArg] [options]

也就是 ng 之后帶相應(yīng)命令或命令的別名，接著帶命令所需的參數(shù)，如果有多個(gè)參數(shù)就緊接著，最后是一些選項(xiàng)配置，選項(xiàng)的格式都加 -- 前綴，如 --spec=false

示例：ng g component --flat --spec=false

g 是 generate 命令的別名，component 是 g 命令的參數(shù)，表示要?jiǎng)?chuàng)建組件，--flat 和 --spec 是選項(xiàng)配置，具體意思后面說。

Angular-CLI 大體上兩種類型的命令，一是創(chuàng)建或修改文件，二是類似運(yùn)行某個(gè)腳本來編譯、構(gòu)建項(xiàng)目。

比如創(chuàng)建項(xiàng)目生成初始骨架的命令、創(chuàng)建組件、指令、服務(wù)這類文件命令；

或者是執(zhí)行 build 編譯命令，或者是 serve 構(gòu)建命令等等。

以下是概覽，粗體字是我較為常接觸的：

常見命令

其實(shí)，這么多命令中，我最常使用的，就只有 ng g 命令，也就是 generate 命令，用來生成各種類型的文件代碼，比如生成組件、生成服務(wù)等。

因?yàn)轫?xiàng)目開發(fā)過程中，就是在編寫組件，編寫服務(wù)，而這些文件又都需要一些元數(shù)據(jù)配置，自己創(chuàng)建 ts 文件再去寫那么代碼有些繁瑣，借助命令比較方便。

還有，運(yùn)行項(xiàng)目時(shí)，會(huì)使用 build 或 serve 命令。

所以，下面就只介紹這三個(gè)命令，其他命令，等到后續(xù)有接觸，深入了解后再補(bǔ)充。

ng g component

ng g component xxx 是用來創(chuàng)建組件的，直接使用該命令，會(huì)默認(rèn)在當(dāng)前目錄下創(chuàng)建一個(gè) xxx 文件夾，并在內(nèi)部創(chuàng)建以下幾個(gè)文件：

• xxx.component.css
• xxx.component.html
• xxx.component.spec.ts
• xxx.component.ts

每個(gè)文件內(nèi)都會(huì)自動(dòng)生成一些所需的代碼，另外，還會(huì)在當(dāng)前目錄所屬的模塊文件中，將該 xxxComponent 組件聲明在相應(yīng)的 declarations 列表中。

以上是命令的默認(rèn)行為，如果要改變這個(gè)默認(rèn)行為，有兩種方式，一是使用命令時(shí)攜帶一些選項(xiàng)配置，二是直接修改 angular.json 配置文件來替換掉默認(rèn)行為。

先介紹第一種方式，使用命令時(shí)，加上一些選項(xiàng)配置：

以上，是使用 ng g component 命令時(shí)，可以攜帶的一些選項(xiàng)配置，來修改默認(rèn)的行為，其中，如果選項(xiàng)配置為 true，那么 value 值可以省略，如 --flat=true 可以簡(jiǎn)寫成 --flat。

比如：ng g component xxx --flat --inlineStyle --inlineTemplate --spec=false --export

另外，其實(shí)這些選項(xiàng)配置中，除了前面幾項(xiàng)可能比較常用外，其他的我基本都還沒怎么接觸過。

下面，講講第二種方式，修改 angular.json 配置文件來修改默認(rèn)行為：

也就是在 projects 里選擇當(dāng)前項(xiàng)目，然后再其 schematics 下進(jìn)行配置，至于 @schematics/angular:component 這串怎么來的，可以去開頭第一行所指的那份 schema.json 文件中查找。

其實(shí)，這份 schema.json 文件，就是 Angular-CLI 的默認(rèn)配置，當(dāng)忘記都有哪些命令或參數(shù)，除了可以借助 help 命令或到官網(wǎng)查閱外，也可以到這份文件中查閱。

除了組件外，也還有指令、模塊等命令的默認(rèn)配置，可以看下其中一項(xiàng)默認(rèn)配置：

{
    "@schematics/angular:component": {
        "type": "object",
        "properties": {
            "changeDetection": {
                "description": "Specifies the change detection strategy.",
                "enum": [
                    "Default",
                    "OnPush"
                ],
                "type": "string",
                "default": "Default",
                "alias": "c"
            },
            "entryComponent": {
                "type": "boolean",
                "default": false,
                "description": "Specifies if the component is an entry component of declaring module."
            },
            "export": {
                "type": "boolean",
                "default": false,
                "description": "Specifies if declaring module exports the component."
            },
            "flat": {
                "type": "boolean",
                "description": "Flag to indicate if a directory is created.",
                "default": false
            },
            "inlineStyle": {
                "description": "Specifies if the style will be in the ts file.",
                "type": "boolean",
                "default": false,
                "alias": "s"
            },
            "inlineTemplate": {
                "description": "Specifies if the template will be in the ts file.",
                "type": "boolean",
                "default": false,
                "alias": "t"
            },
            "module": {
                "type": "string",
                "description": "Allows specification of the declaring module.",
                "alias": "m"
            },
            "prefix": {
                "type": "string",
                "format": "html-selector",
                "description": "The prefix to apply to generated selectors.",
                "alias": "p"
            },
            "selector": {
                "type": "string",
                "format": "html-selector",
                "description": "The selector to use for the component."
            },
            "skipImport": {
                "type": "boolean",
                "description": "Flag to skip the module import.",
                "default": false
            },
            "spec": {
                "type": "boolean",
                "description": "Specifies if a spec file is generated.",
                "default": true
            },
            "styleext": {
                "description": "The file extension to be used for style files.",
                "type": "string",
                "default": "css"
            },
            "viewEncapsulation": {
                "description": "Specifies the view encapsulation strategy.",
                "enum": [
                    "Emulated",
                    "Native",
                    "None",
                    "ShadowDom"
                ],
                "type": "string",
                "alias": "v"
            }
        }
    }
}

可以看到，在官網(wǎng)中看到的關(guān)于 component 的各個(gè)選項(xiàng)配置的信息，其實(shí)在這份文件中也全列出來了，每一項(xiàng)配置的值類型，描述，默認(rèn)值都清清楚楚在文件中了。

ng g directive

這個(gè)是創(chuàng)建指令的命令，組件其實(shí)是指令的一種，所以，上面介紹的關(guān)于組件命令中的各種選項(xiàng)配置，在指令這里也基本都可以使用，這里不列舉了，清楚相關(guān)默認(rèn)文件來源后，不懂的，去翻閱下就可以了。

因?yàn)橹噶畈]有對(duì)應(yīng)的 Template 模板和 CSS 樣式文件，所以，默認(rèn)生成的文件中，只有 xxx.directive.ts 和 xxx.spec.ts 兩份文件。

ng g pipe

這個(gè)是創(chuàng)建管道的命令，它支持的選項(xiàng)配置跟指令的命令基本一樣。

所以，同樣的，它生成的也只有兩份文件，ts 文件和測(cè)試文件。

ng g service

這個(gè)是創(chuàng)建服務(wù)類的命令，支持的選項(xiàng)配置參考上面幾種命令。

默認(rèn)生成的有兩份文件，ts 和 測(cè)試文件。

ng g class/interface/enum

創(chuàng)建實(shí)體類，接口，或枚舉的命令，因?yàn)檫@些類型的文件，默認(rèn)需要的代碼模板并不多，即使不用命令創(chuàng)建，手動(dòng)創(chuàng)建也行。

ng g module

創(chuàng)建一個(gè)模塊，這個(gè)命令有幾個(gè)比較常用的選項(xiàng)配置：

• --flat=true|false

當(dāng)為 true 時(shí)，在當(dāng)前目錄下創(chuàng)建指定的 xxx.module.ts 和 xxx-routing.module.ts 文件，默認(rèn) false，會(huì)自動(dòng)創(chuàng)建 xxx 的文件夾。

• --routing=true|false

當(dāng)為 true 時(shí)，會(huì)自動(dòng)創(chuàng)建對(duì)應(yīng)的 routing 路由模塊，默認(rèn) false。

• --routingScope=Child|Root

創(chuàng)建路由模塊時(shí)，配置項(xiàng)是 Child 還是 Root，默認(rèn) Child。

以上，是 ng generate 命令的常見用法，它還可以用來創(chuàng)建其他東西，但我常用的就這幾種，而且，很多時(shí)候，都不是使用默認(rèn)的行為，因此常常需要配置選項(xiàng)配置一起使用。

另外，為什么非得用 Angular-CLI 命令來創(chuàng)建文件，用 WebStrom 自己創(chuàng)建個(gè) ts 文件不行嗎？

借助 CLI 工具其實(shí)就是為了高效開發(fā)，減少繁瑣的處理，比如，創(chuàng)建一個(gè) xxx.component.ts 文件：

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

@Component({
  selector: "app-cc",
  template: `
    

      cc works!
    
  `,
  styles: []
})
export class CcComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

上面就是執(zhí)行了 ng g component cc --inlineStyle --inlineTemplate 命令后創(chuàng)建的 cc.component.ts 文件的內(nèi)容，如果不借助 CLI 工具，那么這些代碼就需要自己手動(dòng)去輸入，即使復(fù)制黏貼也比較繁瑣。

ng serve

使用該命令，可以編譯我們的項(xiàng)目，并在本地某個(gè)端口上運(yùn)行該項(xiàng)目，默認(rèn)還可以做到實(shí)時(shí)更新修改，不用重新編譯，是本地調(diào)試項(xiàng)目常用的命令。

目前對(duì)該命令的使用，只接觸到默認(rèn)配置，還不清楚一些選項(xiàng)配置的適用場(chǎng)景，后續(xù)有了解再補(bǔ)充。

ng build

該命令用來將 Angular 項(xiàng)目編譯、打包輸出到指定目錄下，最終輸出的文件就是些 HTML，CSS，JavaScript 這些瀏覽器能夠識(shí)別、運(yùn)行的文件。

有時(shí)候，前端和后端的工作都由同一個(gè)人開發(fā)，此時(shí)在本地調(diào)試時(shí)，前端就沒必要造假數(shù)據(jù)，可以直接將 Angular 項(xiàng)目編譯輸出到后端項(xiàng)目的容器中，直接在本地調(diào)試后端接口。

那么，這種時(shí)候就不能用 ng serve 命令了，只能使用 ng build 命令，但該命令，默認(rèn)只是編譯項(xiàng)目，那么豈不是每次代碼發(fā)生修改，都得重新跑一次 ng build 命令？當(dāng)項(xiàng)目有些復(fù)雜時(shí)，豈不是需要浪費(fèi)很多時(shí)間？

這種時(shí)候，就該來了解了解這個(gè)命令的一些選項(xiàng)配置了，經(jīng)過配置，它也可以達(dá)到類似 ng serve 命令一樣自動(dòng)檢測(cè)文件變更并增量更新部署，提高開發(fā)效率。

還有其他配置項(xiàng)，沒使用過，就用過這個(gè)，因?yàn)槲覀兪侵苯忧岸撕蠖艘黄鹱?，后端用?spring boot，所以 Angular 項(xiàng)目使用 ng build 命令編譯輸出到后端項(xiàng)目的容器中，后端跑起來，就可以直接在本地調(diào)試了。

大家好，我是 dasu，歡迎關(guān)注我的公眾號(hào)（dasuAndroidTv），公眾號(hào)中有我的聯(lián)系方式，歡迎有事沒事來嘮嗑一下，如果你覺得本篇內(nèi)容有幫助到你，可以轉(zhuǎn)載但記得要關(guān)注，要標(biāo)明原文哦，謝謝支持~