angular 10 教程 Angular 原理概览

原理图（Schematic）

原理图是一个基于模板的支持复杂逻辑的代码生成器。它是一组通过生成代码或修改代码来转换软件项目的指令。原理图会打包成集合（collection）并用 npm 安装。

原理图的集合可以作为一个强大的工具，以创建、修改和维护任何软件项目，特别是当要自定义 Angular 项目以满足你自己组织的特定需求时。比如，你可以借助原理图来用预定义的模板或布局生成常用的 UI 模式或特定的组件。也可以用原理图来强制执行架构规则和约定，让你的项目保持一致性和互操作性。

Angular CLI 中的原理图

原理图是 Angular 生态系统的一部分。Angular CLI 使用原理图对 Web 应用项目进行转换。你可以修改这些原理图，并定义新的原理图，比如更新代码以修复依赖中的重大变更，或者把新的配置项或框架添加到现有的项目中。

​@schematics/angular​ 集合中的原理图是 ​ng generate​ 和 ​ng add​ 命令的默认原理图。此包里包含一些有名字的原理图，可用于配置 ​ng generate​ 子命令的选项，比如 ​ng generate component​ 和 ​ng generate service​。​ng generate​ 的子命令是相应原理图的简写。可以用长格式来指定要生成的原理图（或原理图集合）：

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

或者

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

配置 CLI 的原理图

与原理图相关联的 JSON 模式会告诉 Angular CLI 命令和子命令都有哪些选项以及默认值。这些默认值可以通过在命令行中为该选项提供不同的值来进行覆盖。

CLI 中那些用来生成项目及其部件的默认原理图，其 JSON 模式收集在 @schematics/angular 包中。该模式描述了 CLI 中每个可用的 ​ng generate​ 子命令选项，如 ​--help​ 输出中所示。

编写库的原理图

作为一名库开发人员，你可以创建自己的自定义原理图集合，以便把你的库与 Angular CLI 集成在一起。

• 添加（Add）原理图允许开发人员使用 ​ng add​ 在 Angular 工作区中安装你的库
• 生成（Generation）原理图可以告诉 ​ng generate​ 子命令如何修改项目、添加配置和脚本，以及为库中定义的工件提供脚手架
• 更新（Update）原理图可以告诉 ​ng update​ 命令，如何更新库的依赖，并在发布新版本时调整其中的重大变更

添加（Add）原理图

库中通常都会提供一个添加原理图，以便通过 ​ng add​ 把这个库添加到现有项目中。add 命令会运行包管理器来下载新的依赖，并调用一个原理图形式的安装脚本。

比如，@angular/material 原理图会要求 ​add ​命令安装并设置 Angular Material 及其主题，并注册可通过 ​ng generate​ 创建的新启动器组件。可以把它作为自己的 "添加原理图" 的范例。

合作伙伴和第三方库也可以通过添加原理图来支持 Angular CLI。比如，​@ng-bootstrap/schematics​ 会把 ng-bootstrap 添加到应用中，​@clr/angular​ 会安装并设置 VMWare 的 Clarity。

"添加原理图" 还可以通过更改配置、添加额外依赖（比如腻子脚本），或者添加程序包特有的初始化代码来修改项目。比如，​@angular/pwa​ 原理图会通过添加一个应用清单（manifest）和 Service Worker。

生成（Generation）原理图

生成器原理图是 ​ng generate​ 的操作指令。那些已经有文档的子命令会使用默认的 Angular 生成器原理图，但你可以在子命令中指定另一个原理图来生成你的库中定义的那些工件。

比如，Angular Material 为它定义的一些 UI 组件提供了生成器原理图。下面的命令会使用其中一个原理图来渲染一个 Angular Material 的 ​<mat-table>​ 组件，它预先配置了一个用于排序和分页的数据源。

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

更新原理图

​ng update​ 命令可以用来更新工作区的库依赖。如果你没有提供任何选项或使用了 help 选项，该命令会检查你的工作区并建议要更新哪些库。

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.

如果你给这个命令指定一组要更新的库（或 ​--all​ 标志），它就会更新这些库、这些库的对等依赖，以及对等依赖的对等依赖。

如果存在不一致（比如，如果在某个简单的 semver 范围内无法匹配对等依赖），那么该命令会生成一个错误，并且不会更改工作区中的任何内容。
我们建议你不要强制更新所有的依赖项，而应该首先尝试更新特定的依赖项。
关于 ​ng update​ 命令工作原理的更多信息，请参阅“更新命令”。

如果你创建的新版本的库引入了潜在的重大更改，你可以提供一个更新原理图，让 ​ng update​ 命令能够自动解决所更新项目中的任何重大修改。

比如，假设你要更新 Angular Material 库。

ng update @angular/material

该命令会在你的工作区的 ​package.json​ 中更新 ​@angular/material​ 及其依赖项 ​@angular/cdk​。如果任何一个包中包含了涵盖从现有版本到新版本的迁移规则的更新原理图，那么该命令就会在你的工作区中运行这个原理图。