Angular 原理圖概覽

原理圖（Schematic）

原理圖是一個(gè)基于模板的支持復(fù)雜邏輯的代碼生成器。它是一組通過生成代碼或修改代碼來轉(zhuǎn)換軟件項(xiàng)目的指令。原理圖會(huì)打包成集合（collection）并用 npm 安裝。

原理圖的集合可以作為一個(gè)強(qiáng)大的工具，以創(chuàng)建、修改和維護(hù)任何軟件項(xiàng)目，特別是當(dāng)要自定義 Angular 項(xiàng)目以滿足你自己組織的特定需求時(shí)。比如，你可以借助原理圖來用預(yù)定義的模板或布局生成常用的 UI 模式或特定的組件。也可以用原理圖來強(qiáng)制執(zhí)行架構(gòu)規(guī)則和約定，讓你的項(xiàng)目保持一致性和互操作性。

Angular CLI 中的原理圖

原理圖是 Angular 生態(tài)系統(tǒng)的一部分。Angular CLI 使用原理圖對(duì) Web 應(yīng)用項(xiàng)目進(jìn)行轉(zhuǎn)換。你可以修改這些原理圖，并定義新的原理圖，比如更新代碼以修復(fù)依賴中的重大變更，或者把新的配置項(xiàng)或框架添加到現(xiàn)有的項(xiàng)目中。

?@schematics/angular? 集合中的原理圖是 ?ng generate? 和 ?ng add? 命令的默認(rèn)原理圖。此包里包含一些有名字的原理圖，可用于配置 ?ng generate? 子命令的選項(xiàng)，比如 ?ng generate component? 和 ?ng generate service?。?ng generate? 的子命令是相應(yīng)原理圖的簡(jiǎn)寫?？梢杂瞄L(zhǎng)格式來指定要生成的原理圖（或原理圖集合）：

ng generate my-schematic-collection:my-schematic-name

或者

ng generate my-schematic-name --collection collection-name

配置 CLI 的原理圖

與原理圖相關(guān)聯(lián)的 JSON 模式會(huì)告訴 Angular CLI 命令和子命令都有哪些選項(xiàng)以及默認(rèn)值。這些默認(rèn)值可以通過在命令行中為該選項(xiàng)提供不同的值來進(jìn)行覆蓋。

CLI 中那些用來生成項(xiàng)目及其部件的默認(rèn)原理圖，其 JSON 模式收集在 @schematics/angular 包中。該模式描述了 CLI 中每個(gè)可用的 ?ng generate? 子命令選項(xiàng)，如 ?--help? 輸出中所示。

編寫庫的原理圖

作為一名庫開發(fā)人員，你可以創(chuàng)建自己的自定義原理圖集合，以便把你的庫與 Angular CLI 集成在一起。

• 添加（Add）原理圖允許開發(fā)人員使用 ?ng add? 在 Angular 工作區(qū)中安裝你的庫
• 生成（Generation）原理圖可以告訴 ?ng generate? 子命令如何修改項(xiàng)目、添加配置和腳本，以及為庫中定義的工件提供腳手架
• 更新（Update）原理圖可以告訴 ?ng update? 命令，如何更新庫的依賴，并在發(fā)布新版本時(shí)調(diào)整其中的重大變更

添加（Add）原理圖

庫中通常都會(huì)提供一個(gè)添加原理圖，以便通過 ?ng add? 把這個(gè)庫添加到現(xiàn)有項(xiàng)目中。add 命令會(huì)運(yùn)行包管理器來下載新的依賴，并調(diào)用一個(gè)原理圖形式的安裝腳本。

比如，@angular/material 原理圖會(huì)要求 ?add ?命令安裝并設(shè)置 Angular Material 及其主題，并注冊(cè)可通過 ?ng generate? 創(chuàng)建的新啟動(dòng)器組件?？梢园阉鳛樽约旱?"添加原理圖" 的范例。

合作伙伴和第三方庫也可以通過添加原理圖來支持 Angular CLI。比如，?@ng-bootstrap/schematics? 會(huì)把 ng-bootstrap 添加到應(yīng)用中，?@clr/angular? 會(huì)安裝并設(shè)置 VMWare 的 Clarity。

"添加原理圖" 還可以通過更改配置、添加額外依賴（比如膩?zhàn)幽_本），或者添加程序包特有的初始化代碼來修改項(xiàng)目。比如，?@angular/pwa? 原理圖會(huì)通過添加一個(gè)應(yīng)用清單（manifest）和 Service Worker。

生成（Generation）原理圖

生成器原理圖是 ?ng generate? 的操作指令。那些已經(jīng)有文檔的子命令會(huì)使用默認(rèn)的 Angular 生成器原理圖，但你可以在子命令中指定另一個(gè)原理圖來生成你的庫中定義的那些工件。

比如，Angular Material 為它定義的一些 UI 組件提供了生成器原理圖。下面的命令會(huì)使用其中一個(gè)原理圖來渲染一個(gè) Angular Material 的 ?<mat-table>? 組件，它預(yù)先配置了一個(gè)用于排序和分頁的數(shù)據(jù)源。

ng generate @angular/material:table <component-name>

更新原理圖

?ng update? 命令可以用來更新工作區(qū)的庫依賴。如果你沒有提供任何選項(xiàng)或使用了 help 選項(xiàng)，該命令會(huì)檢查你的工作區(qū)并建議要更新哪些庫。

ng update
    We analyzed your package.json, there are some packages to update:

      Name                               Version                  Command to update
     ‐-------------------------------------------------------------------------------
      @angular/cdk                       7.2.2 -> 7.3.1           ng update @angular/cdk
      @angular/cli                       7.2.3 -> 7.3.0           ng update @angular/cli
      @angular/core                      7.2.2 -> 7.2.3           ng update @angular/core
      @angular/material                  7.2.2 -> 7.3.1           ng update @angular/material
      rxjs                               6.3.3 -> 6.4.0           ng update rxjs

    There might be additional packages that are outdated.
    Run "ng update --all" to try to update all at the same time.

如果你給這個(gè)命令指定一組要更新的庫（或 ?--all? 標(biāo)志），它就會(huì)更新這些庫、這些庫的對(duì)等依賴，以及對(duì)等依賴的對(duì)等依賴。

如果存在不一致（比如，如果在某個(gè)簡(jiǎn)單的 semver 范圍內(nèi)無法匹配對(duì)等依賴），那么該命令會(huì)生成一個(gè)錯(cuò)誤，并且不會(huì)更改工作區(qū)中的任何內(nèi)容。
我們建議你不要強(qiáng)制更新所有的依賴項(xiàng)，而應(yīng)該首先嘗試更新特定的依賴項(xiàng)。
關(guān)于 ?ng update? 命令工作原理的更多信息，請(qǐng)參閱“更新命令”。

如果你創(chuàng)建的新版本的庫引入了潛在的重大更改，你可以提供一個(gè)更新原理圖，讓 ?ng update? 命令能夠自動(dòng)解決所更新項(xiàng)目中的任何重大修改。

比如，假設(shè)你要更新 Angular Material 庫。

ng update @angular/material

該命令會(huì)在你的工作區(qū)的 ?package.json? 中更新 ?@angular/material? 及其依賴項(xiàng) ?@angular/cdk?。如果任何一個(gè)包中包含了涵蓋從現(xiàn)有版本到新版本的遷移規(guī)則的更新原理圖，那么該命令就會(huì)在你的工作區(qū)中運(yùn)行這個(gè)原理圖。