创新互联Angular教程：Angular原理图概览

原理图（Schematic）

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

成都创新互联是专业的牟定网站建设公司，牟定接单;提供成都网站设计、网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行牟定网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

原理图的集合可以作为一个强大的工具，以创建、修改和维护任何软件项目，特别是当要自定义 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 的组件，它预先配置了一个用于排序和分页的数据源。

ng generate @angular/material:table

更新原理图

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。如果任何一个包中包含了涵盖从现有版本到新版本的迁移规则的更新原理图，那么该命令就会在你的工作区中运行这个原理图。

本文标题：创新互联Angular教程：Angular原理图概览
URL链接：http://www.shufengxianlan.com/qtweb/news19/406019.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容