角示意图教程
学习如何创建Angular的原理图。
图表是什么?
原理图是转换现有文件系统的生成器。
有了原理图，我们可以：
- 创建文件，
- 重构现有的文件，或者
- 移动文件。
什么可以做到什么？
一般来说,示意图:
- 将库添加到角度项目，
- 更新角度项目中的库，以及
- 生成代码。
在您自己的项目或组织中使用图表的可能性是无限的。您或您的组织如何从创建schematics集合中受益的示例包括:
- 在应用程序中生成常用的UI模式。
- 使用预定义的模板或布局生成特定组件。
- 强制执行组织架构。
角度特定？
目前，是的，原理图是角生态系统的一部分。
CLI集成?
是的，原理图与角CLI紧密整合。您使用以下CLI命令使用原理图（少数）：
- ng补充道
- ng生成
- ng更新
什么是收藏?
集合是一个示意图列表。我们将在项目的每个示意图中定义元数据Collection.json.文件。
安装
Ok, let's dive in. First, install the schematics CLI via npm or yarn:
$NPM.安装-g @ Angular-devkit / schematics-cli $纱加- g @angular-devkit / schematics-cli
入门
首先，我建议您查看示例原理图并通读代码和相关注释。你可以通过以下方式生成示例示意图:
$原理图原理图--name演示
你好世界演示
看看存储库以遵循，因为我们构建一个简单的Hello World示意图：
你好，世界
一个良好的开始，是一个简单的“Hello World”原理图。使用Schematics CLI创建一个新的原理图空白项目：
$ schicatics空白--name=hello world美元光盘hello world
打开src / collection.json.文件:
{“$架构”：“. . / node_modules / @angular-devkit /图表/ collection-schema.json”那“原理图”：{“hello world”：{“描述”：“一个空白的原理图。”那“工厂”：“./hello-world/index#helloworld”}}}
让我们回顾一下Collection.json.配置:
- 该
$架构属性指定进行验证的架构。
- 该
图表属性是每个键的对象名称示意图。
- 每个原理图都有一个
描述属性提供了对原理图的描述。
- 每个原理图也有一个
工厂属性是一个串它指定原理图入口点的文件位置，后跟一个散列符号，后跟将要调用的函数;在本例中，我们将调用helloWorld ()功能在hello world / index.js文件。
我们还可以为示意图指定一些其他属性：
- 可选
别名属性是AN数组我们可以用来为我们的原理图指定一个或多个别名。例如，“生成”示意图的别名是用角CLI船舶的“G”是“G”。这使我们能够通过执行生成命令ng g美元。
- 可选
架构属性可用于为每个可用于原理图提供的每个单独原理图和所有命令行选项指定架构。
同样重要的是要注意我们的项目package.json.文件包含一个新的图表要点的财产src / collections.json.文件:
{“名称”：“hello world”那“版”：“0.0.0”那“描述”：“空白的原理图”那“脚本”：{“建立”：“tsc -p tsconfig.json”那“测试”：“NPM运行构建&& jasmine src / ** / * _ spec.js”}那“关键词”：[“原理图”]那“作者”：“那“执照”：“麻省理工学院”那“原理图”：“./src/collection.json”那“依赖”：{“@ Angular-devkit / core”：“^ 7.0.2”那“@ Angular-devkit / schematics”：“^ 7.0.2”那“@types /茉莉”：“^ 2.6.0”那“@types /节点”：“^ 8.0.31”那“茉莉花”：“^ 2.8.0”那“打字”：“^ 2.5.2”}}
进入功能
让我们打开SRC / HELLO-WORLD / INDEX.TS文件并检查内容:
进口{规则那SchematicContext那树}从“@angular-devkit /图表”;出口函数你好，世界（选择：任何）：规则{返回（树：树那_context：SchematicContext）= >{返回树;};}
- 我们出口
你好，世界将被作为“入口函数”调用的函数。
- 该函数接受一个options参数，它是命令行参数键/值对的对象。
- 我们的函数是更高阶的函数，这意味着它要么接受或返回函数参考。在这种情况下，我们的函数返回一个接受的函数
树和SchematicContext对象。
什么是树？
根据文献，一个树是：
包含原始文件系统的更改的暂存区域以及应用于它的更改列表。
我们可以使用树来完成以下几件事:
读（路径：字符串）：缓冲区|空值;—读取指定的路径存在(路径:字符串):布尔;- 确定是否存在路径create（path：string，content：buffer |字符串）：void;- 在指定的路径中使用指定内容创建一个新文件beginupdate（路径：字符串）：updateAcorder;- 返回一个新的updateRecOrder.实例的指定路径的文件commitupdate（记录：updateAtecorder）：void;- 提交一个行动updateRecOrder.
什么是规则？
一种规则一个函数对a应用操作吗树鉴于SchematicContext：
声明类型规则=（树：树那背景：SchematicContext）= >树|可观察到的<树>|规则|无效;
在上面的Hello World示例代码中，请注意helloWorld ()“条目”函数返回一个规则。
构建和执行
让我们继续建立并执行我们的原理图：
$纱建立$原理图。：您好世界 - FOO=酒吧
有几件事需要注意:
- 我们正在使用该模板图表CLI,不是角CLI。
- 第一个选项是指定集合名称。在这个例子中，我们指向当前目录，
。，作为集合。
- 收藏名称可选。如果我们省略了集合名称，则使用内部集合。我们以前使用内部收藏在执行“空白”原理图中。
- 如果指定了集合名称，则使用冒号(:)分隔集合名称和原理图名称。
- 在这个例子中，我们正在执行“hello-world”原理图。
- 最后，我们还向我们的原理图指定“foo”选项，该选项具有“栏”值。
让我们开始向我们从返回的函数添加日志语句你好，世界功能：
出口函数你好，世界（选择：任何）：规则{返回（树：树那_context：SchematicContext）= >{控制台。日志（选择）;返回树;};}
构建并执行原理图，您现在应该看到将您指定到原理图的选项的日志：
$纱建立$原理图。：您好世界 - FOO=酒吧{foo：“酒吧”}无计可施。
生成Hello World模板
我们的原理图不会无法注销用户指定选项。让我们更新我们的规则用来使用的功能树.Create（）创建新文件的方法：
出口函数你好，世界（选择：任何）：规则{返回（树：树那_context：SchematicContext）= >{树。创建（“hello-world.html”那`你好
$ {选择。名称}`）;返回树;};}
我们以前学到的那样，创造（）方法接受路径与创建的文件内容的文件。在本例中，我们只是使用名称值，用户指定用来填充的值hello-world.html.用字符串"Hello"后面跟名字的模板。
当我们构建和执行我们更新的原理图，我们应该看到：
$纱构建$ schematics .:hello-world——name=“角社区”- 运行创建/hello-world.html（37.字节）
注意：
- 我指定了
名称选择示意图时的选项
- 我还指定了
干跑选项以避免实际的文件创建。
删除干跑选项应该创建hello-world.html.模板在当前工作目录中。
单位测试
角度原理图包括一个schematictestrunner.用于构建一套单元测试，以确保原理图集合的质量。
让我们测试一下新创建的hello-world原理图:
constcollectionPath=路径。加入（__dirname那“../collection.json”）;描述（“hello world”那（）= >{它（“作品”那（）= >{const赛跑者=新schematictestrunner.（“原理图”那collectionPath）;const树=赛跑者。runschematic（“hello world”那{}那树。空的（））;预计（树。文件。长度）。toequal.（1）;}）;}）;
- 使用茉莉花执行测试，这应该对角开发商感到非常舒适。
- 我们新兴了
schematictestrunner.类,指定CollectionName.其次是collectionPath。
- 使用我们调用的测试运行器
runschematic（）,指定schematicName，选项对象和源树。
- 最后，我们断言树的文件数量递增到
1。
结论
我希望这是您与角度原理图中的学习之旅的开始。
有关一些进一步的资源，请退房：
学习如何创建Angular的原理图。
图表是什么?
原理图是转换现有文件系统的生成器。
有了原理图，我们可以：
- 创建文件，
- 重构现有的文件，或者
- 移动文件。
什么可以做到什么？
一般来说,示意图:
- 将库添加到角度项目，
- 更新角度项目中的库，以及
- 生成代码。
在您自己的项目或组织中使用图表的可能性是无限的。您或您的组织如何从创建schematics集合中受益的示例包括:
- 在应用程序中生成常用的UI模式。
- 使用预定义的模板或布局生成特定组件。
- 强制执行组织架构。
角度特定？
目前，是的，原理图是角生态系统的一部分。
CLI集成?
是的，原理图与角CLI紧密整合。您使用以下CLI命令使用原理图（少数）：
- ng补充道
- ng生成
- ng更新
什么是收藏?
集合是一个示意图列表。我们将在项目的每个示意图中定义元数据Collection.json.文件。
安装
Ok, let's dive in. First, install the schematics CLI via npm or yarn:
$NPM.安装-g @ Angular-devkit / schematics-cli $纱加- g @angular-devkit / schematics-cli入门
首先，我建议您查看示例原理图并通读代码和相关注释。你可以通过以下方式生成示例示意图:
$原理图原理图--name演示你好世界演示
看看存储库以遵循，因为我们构建一个简单的Hello World示意图：
你好，世界
一个良好的开始，是一个简单的“Hello World”原理图。使用Schematics CLI创建一个新的原理图空白项目：
$ schicatics空白--name=hello world美元光盘hello world打开src / collection.json.文件:
{“$架构”：“. . / node_modules / @angular-devkit /图表/ collection-schema.json”那“原理图”：{“hello world”：{“描述”：“一个空白的原理图。”那“工厂”：“./hello-world/index#helloworld”}}}让我们回顾一下Collection.json.配置:
- 该
$架构属性指定进行验证的架构。 - 该
图表属性是每个键的对象名称示意图。 - 每个原理图都有一个
描述属性提供了对原理图的描述。 - 每个原理图也有一个
工厂属性是一个串它指定原理图入口点的文件位置，后跟一个散列符号，后跟将要调用的函数;在本例中，我们将调用helloWorld ()功能在hello world / index.js文件。
我们还可以为示意图指定一些其他属性：
- 可选
别名属性是AN数组我们可以用来为我们的原理图指定一个或多个别名。例如，“生成”示意图的别名是用角CLI船舶的“G”是“G”。这使我们能够通过执行生成命令ng g美元。 - 可选
架构属性可用于为每个可用于原理图提供的每个单独原理图和所有命令行选项指定架构。
同样重要的是要注意我们的项目package.json.文件包含一个新的图表要点的财产src / collections.json.文件:
{“名称”：“hello world”那“版”：“0.0.0”那“描述”：“空白的原理图”那“脚本”：{“建立”：“tsc -p tsconfig.json”那“测试”：“NPM运行构建&& jasmine src / ** / * _ spec.js”}那“关键词”：[“原理图”]那“作者”：“那“执照”：“麻省理工学院”那“原理图”：“./src/collection.json”那“依赖”：{“@ Angular-devkit / core”：“^ 7.0.2”那“@ Angular-devkit / schematics”：“^ 7.0.2”那“@types /茉莉”：“^ 2.6.0”那“@types /节点”：“^ 8.0.31”那“茉莉花”：“^ 2.8.0”那“打字”：“^ 2.5.2”}}进入功能
让我们打开SRC / HELLO-WORLD / INDEX.TS文件并检查内容:
进口{规则那SchematicContext那树}从“@angular-devkit /图表”;出口函数你好，世界（选择：任何）：规则{返回（树：树那_context：SchematicContext）= >{返回树;};}- 我们出口
你好，世界将被作为“入口函数”调用的函数。 - 该函数接受一个options参数，它是命令行参数键/值对的对象。
- 我们的函数是更高阶的函数，这意味着它要么接受或返回函数参考。在这种情况下，我们的函数返回一个接受的函数
树和SchematicContext对象。
什么是树？
根据文献，一个树是：
包含原始文件系统的更改的暂存区域以及应用于它的更改列表。
我们可以使用树来完成以下几件事:
读（路径：字符串）：缓冲区|空值;—读取指定的路径存在(路径:字符串):布尔;- 确定是否存在路径create（path：string，content：buffer |字符串）：void;- 在指定的路径中使用指定内容创建一个新文件beginupdate（路径：字符串）：updateAcorder;- 返回一个新的updateRecOrder.实例的指定路径的文件commitupdate（记录：updateAtecorder）：void;- 提交一个行动updateRecOrder.
什么是规则？
一种规则一个函数对a应用操作吗树鉴于SchematicContext：
声明类型规则=（树：树那背景：SchematicContext）= >树|可观察到的<树>|规则|无效;在上面的Hello World示例代码中，请注意helloWorld ()“条目”函数返回一个规则。
构建和执行
让我们继续建立并执行我们的原理图：
$纱建立$原理图。：您好世界 - FOO=酒吧有几件事需要注意:
- 我们正在使用该模板图表CLI,不是角CLI。
- 第一个选项是指定集合名称。在这个例子中，我们指向当前目录，
。，作为集合。 - 收藏名称可选。如果我们省略了集合名称，则使用内部集合。我们以前使用内部收藏在执行“空白”原理图中。
- 如果指定了集合名称，则使用冒号(:)分隔集合名称和原理图名称。
- 在这个例子中，我们正在执行“hello-world”原理图。
- 最后，我们还向我们的原理图指定“foo”选项，该选项具有“栏”值。
让我们开始向我们从返回的函数添加日志语句你好，世界功能：
出口函数你好，世界（选择：任何）：规则{返回（树：树那_context：SchematicContext）= >{控制台。日志（选择）;返回树;};}构建并执行原理图，您现在应该看到将您指定到原理图的选项的日志：
$纱建立$原理图。：您好世界 - FOO=酒吧{foo：“酒吧”}无计可施。生成Hello World模板
我们的原理图不会无法注销用户指定选项。让我们更新我们的规则用来使用的功能树.Create（）创建新文件的方法：
出口函数你好，世界（选择：任何）：规则{返回（树：树那_context：SchematicContext）= >{树。创建（“hello-world.html”那`你好
$ {选择。名称}`）;返回树;};}我们以前学到的那样，创造（）方法接受路径与创建的文件内容的文件。在本例中，我们只是使用名称值，用户指定用来填充的值hello-world.html.用字符串"Hello"后面跟名字的模板。
当我们构建和执行我们更新的原理图，我们应该看到：
$纱构建$ schematics .:hello-world——name=“角社区”- 运行创建/hello-world.html（37.字节）注意：
- 我指定了
名称选择示意图时的选项 - 我还指定了
干跑选项以避免实际的文件创建。
删除干跑选项应该创建hello-world.html.模板在当前工作目录中。
单位测试
角度原理图包括一个schematictestrunner.用于构建一套单元测试，以确保原理图集合的质量。
让我们测试一下新创建的hello-world原理图:
constcollectionPath=路径。加入（__dirname那“../collection.json”）;描述（“hello world”那（）= >{它（“作品”那（）= >{const赛跑者=新schematictestrunner.（“原理图”那collectionPath）;const树=赛跑者。runschematic（“hello world”那{}那树。空的（））;预计（树。文件。长度）。toequal.（1）;}）;}）;- 使用茉莉花执行测试，这应该对角开发商感到非常舒适。
- 我们新兴了
schematictestrunner.类,指定CollectionName.其次是collectionPath。 - 使用我们调用的测试运行器
runschematic（）,指定schematicName，选项对象和源树。 - 最后，我们断言树的文件数量递增到
1。
结论
我希望这是您与角度原理图中的学习之旅的开始。
有关一些进一步的资源，请退房：