角度原理图教程
了解如何创建角度原理图。
什么是原理图表？
原理图是转换现有文件系统的生成器。
有了图表，我们可以:
- 创建文件,
- 重构现有文件，或
- 移动文件。
Schematics能做什么?
一般来说，原理图：
- 向Angular项目中添加库，
- 在Angular项目中更新库
- 生成的代码。
在您自己的项目中或组织中使用原理图的可能性是无穷无尽的。您或您的组织如何从创建原理图集合中受益的一些示例包括：
- 在应用程序中生成常用的UI模式。
- 使用预定义模板或布局生成特定于组织的组件。
- 实施组织架构。
角具体?
目前，示意图是Angular生态系统的一部分。
CLI集成？
是的，原理图与Angular 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
开始
要开始，我建议您查看示例原理图，并通过代码和关联注释读取。您可以通过以下方式生成示例原理图：
$ schematics schematic——name demo
Hello World示例
在构建一个简单的Hello World原理图时，请查看存储库以进行后续操作:
你好世界
可以从简单的“Hello World”示意图开始。使用schematics CLI创建一个新的schematics空白项目:
$ schematics空白——名称＝你好世界$cd你好，世界
打开src / collection.json文件：
｛“美元模式”：“../node_modules/@angular-dkit/schematics/collection-schema.json”，“图表”：｛“你好，世界”：｛“描述”：“一个空白示意图”。，“工厂”：”。/ hello world /指数# helloWorld”｝｝｝
我们来回顾一下collection.json配置：
- 的
美元的模式属性指定验证的架构。
- 的
原理图属性是一个对象，其中每个键都是的名字的示意图。
- 每个示意图都有一个
描述您猜测它的财产提供了原理图的描述。
- 每个示意图也有一个
工厂属性，它是字符串这指定了原理图的入口点的文件位置，然后是哈希符号，然后是将调用的函数;在这种情况下，我们将举援你好，世界（）功能你好世界/ index.js文件。
我们还可以为原理图指定一些额外的属性:
- 可选
别名房地产是一个大批可以用来为原理图指定一个或多个别名。例如，Angular cli附带的“generate”原理图的别名是“g”。这使我们能够通过执行生成命令$ NG G.．
- 可选
模式属性可用于为每个示意图指定模式，以及该示意图可用的所有命令行选项。
我们的项目也很重要package.json文件包含一个新的原理图属性，该属性指向src / collections.json文件：
｛“名称”：“你好，世界”，“版本”：“0.0.0”，“描述”：“一个空白的示意图”，“脚本”：｛“构建”：“tsc - p tsconfig.json”，“测试”："npm run build && jasmine src/**/*_spec.js"｝，“关键词”：［“图表”］，“作者”：＂"，“许可证”：“麻省理工学院”，“图表”：”。/ src / collection.json”，“依赖性”：｛“@angular-devkit /核心”：“^ 7.0.2”，“@angular-devkit /图表”：“^ 7.0.2”，“@类型/茉莉花”：“^ 2.6.0”，“@类型/节点”：“^ 8.0.31”，“茉莉花”：“^ 2.8.0”，“打字稿”：“^ 2.5.2“｝｝
入口函数
让我们打开src / hello world / index.ts文件并检查内容：
进口｛规则，示意图，树｝从'@ Angular-devkit / schematics'；出口功能helloWorld（选项：任何）：规则｛返回（树：树，_语境：示意图）=>｛返回树；｝；｝
- 我们出口
helloWorld将被调用为“入函数”的函数。
- 该函数接受选项参数，它是命令行参数键/值对的对象。
- 我们的函数是一个高阶函数，这意味着它可以接受或返回函数引用。在本例中，函数返回一个接受的函数
树和示意图对象。
什么是a树？
根据文件，a树是:
用于更改的暂存区域，包含原始文件系统和要应用到它的更改列表。
我们可以使用树完成的一些事情包括：
读取(path: string): Buffer | null;- 阅读指定的路径存在（路径：字符串）：布尔值;-确定路径是否存在create(path: string, content: Buffer | string): void;-在指定的路径上创建包含指定内容的新文件beginUpdate(路径:字符串):UpdateRecorder;-返回一个新的UpdateRecorder指定路径处的文件的实例commitUpdate(记录:UpdateRecorder):空白;-执行一个对象的动作UpdateRecorder
什么是a规则？
一个规则是一个应用于a的函数树考虑到示意图：
声明类型规则＝（树：树，上下文：示意图）=>树|可观测的<树>|规则|空白；
在上面的hello world示例代码中，注意你好，世界（）函数返回一个规则．
构建和执行
让我们继续构建并执行我们的原理图:
＄纱创建$ schematics .:hello-world——foo＝酒吧
几件事要注意：
- 我们正在使用原理图CLI，不是棱角CLI。
- 第一个选项是指定集合名称。在此实例中，我们指向当前目录，
．，作为收藏。
- 集合名称可选。如果省略集合名称，则使用内部集合。在前面执行“blank”示意图时，我们使用了内部集合。
- 如果我们指定集合名称，我们将使用冒号（:)分隔收集名称，然后将其分隔为原理图名称。
- 在此示例中，我们正在执行“Hello-World”的原理图。
- 最后，我们还将"foo"选项指定到原理图，其值为"bar"。
函数返回的函数中添加一条日志语句helloWorld功能:
出口功能helloWorld（选项：任何）：规则｛返回（树：树，_语境：示意图）=>｛安慰．日志（选项）；返回树；｝；｝
构建并执行原理图，您现在应该看到您为原理图指定的选项的日志记录:
＄纱创建$ schematics .:hello-world——foo＝酒吧｛foo:'酒吧'｝没什么可做的。
生成Hello World模板
除了注销用户指定的选项外，我们的原理图目前没有任何内容。让我们更新规则函数来使用tree.create ()方法创建新文件:
出口功能helloWorld（选项：任何）：规则｛返回（树：树，_语境：示意图）=>｛树．创建（“hello-world.html”，｀<标题>你好$ {选项．的名字｝< / h1 >｀）；返回树；｝；｝
正如我们之前所知道的create ()方法接受的路径到我们正在创建的文件内容对于文件。在这个例子中，我们只是使用了的名字指定用户指定为填充a的值hello-world.html模板与字符串“hello”，后跟名称。
当我们构建并执行更新后的示意图时，我们应该看到:
＄纱建立$原理图。：你好世界 - 名称＝“角社区”——即将创建/ hello-world.html（37字节）
注意:
- 我指定了
的名字选项
- 我也指定了
管制选项以避免实际的文件创建。
去除管制选项应该创建hello-world.html当前工作目录中的模板。
单元测试
Angular原理图包括一个SchematicTestRunner建立一套单元测试，以确保原理图集合的质量。
让我们测试我们新创建的Hello-World原理图：
常量集合路径＝路径．加入（__dirname.，“. . / collection.json”）；描述（“你好，世界”，（）=>｛它（“工作”，（）=>｛常量跑步者＝新的SchematicTestRunner（“图表”，集合路径）；常量树＝跑步者．runSchematic（“你好，世界”，｛｝，树．空（））；预计（树．文件．长度）．toEqual（1）；｝）；｝）；
- 测试是使用Jasmine执行的，Angular开发人员应该会觉得很舒服。
- 我们新的开始
SchematicTestRunner班级，指明collectionName紧随其后的是集合路径．
- 使用我们调用的测试赛道
runSchematic ()，指定这一点架构图名称，选项对象和源树．
- 最后，我们断言树的文件计数已经增加到
1．
结论
我希望这是你学习Angular原理图之旅的开始。
想要更多的资源，请查看:
了解如何创建角度原理图。
什么是原理图表？
原理图是转换现有文件系统的生成器。
有了图表，我们可以:
- 创建文件,
- 重构现有文件，或
- 移动文件。
Schematics能做什么?
一般来说，原理图：
- 向Angular项目中添加库，
- 在Angular项目中更新库
- 生成的代码。
在您自己的项目中或组织中使用原理图的可能性是无穷无尽的。您或您的组织如何从创建原理图集合中受益的一些示例包括：
- 在应用程序中生成常用的UI模式。
- 使用预定义模板或布局生成特定于组织的组件。
- 实施组织架构。
角具体?
目前，示意图是Angular生态系统的一部分。
CLI集成？
是的，原理图与Angular 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开始
要开始，我建议您查看示例原理图，并通过代码和关联注释读取。您可以通过以下方式生成示例原理图：
$ schematics schematic——name demoHello World示例
在构建一个简单的Hello World原理图时，请查看存储库以进行后续操作:
你好世界
可以从简单的“Hello World”示意图开始。使用schematics CLI创建一个新的schematics空白项目:
$ schematics空白——名称＝你好世界$cd你好，世界打开src / collection.json文件：
｛“美元模式”：“../node_modules/@angular-dkit/schematics/collection-schema.json”，“图表”：｛“你好，世界”：｛“描述”：“一个空白示意图”。，“工厂”：”。/ hello world /指数# helloWorld”｝｝｝我们来回顾一下collection.json配置：
- 的
美元的模式属性指定验证的架构。 - 的
原理图属性是一个对象，其中每个键都是的名字的示意图。 - 每个示意图都有一个
描述您猜测它的财产提供了原理图的描述。 - 每个示意图也有一个
工厂属性，它是字符串这指定了原理图的入口点的文件位置，然后是哈希符号，然后是将调用的函数;在这种情况下，我们将举援你好，世界（）功能你好世界/ index.js文件。
我们还可以为原理图指定一些额外的属性:
- 可选
别名房地产是一个大批可以用来为原理图指定一个或多个别名。例如，Angular cli附带的“generate”原理图的别名是“g”。这使我们能够通过执行生成命令$ NG G.． - 可选
模式属性可用于为每个示意图指定模式，以及该示意图可用的所有命令行选项。
我们的项目也很重要package.json文件包含一个新的原理图属性，该属性指向src / collections.json文件：
｛“名称”：“你好，世界”，“版本”：“0.0.0”，“描述”：“一个空白的示意图”，“脚本”：｛“构建”：“tsc - p tsconfig.json”，“测试”："npm run build && jasmine src/**/*_spec.js"｝，“关键词”：［“图表”］，“作者”：＂"，“许可证”：“麻省理工学院”，“图表”：”。/ src / collection.json”，“依赖性”：｛“@angular-devkit /核心”：“^ 7.0.2”，“@angular-devkit /图表”：“^ 7.0.2”，“@类型/茉莉花”：“^ 2.6.0”，“@类型/节点”：“^ 8.0.31”，“茉莉花”：“^ 2.8.0”，“打字稿”：“^ 2.5.2“｝｝入口函数
让我们打开src / hello world / index.ts文件并检查内容：
进口｛规则，示意图，树｝从'@ Angular-devkit / schematics'；出口功能helloWorld（选项：任何）：规则｛返回（树：树，_语境：示意图）=>｛返回树；｝；｝- 我们出口
helloWorld将被调用为“入函数”的函数。 - 该函数接受选项参数，它是命令行参数键/值对的对象。
- 我们的函数是一个高阶函数，这意味着它可以接受或返回函数引用。在本例中，函数返回一个接受的函数
树和示意图对象。
什么是a树？
根据文件，a树是:
用于更改的暂存区域，包含原始文件系统和要应用到它的更改列表。
我们可以使用树完成的一些事情包括：
读取(path: string): Buffer | null;- 阅读指定的路径存在（路径：字符串）：布尔值;-确定路径是否存在create(path: string, content: Buffer | string): void;-在指定的路径上创建包含指定内容的新文件beginUpdate(路径:字符串):UpdateRecorder;-返回一个新的UpdateRecorder指定路径处的文件的实例commitUpdate(记录:UpdateRecorder):空白;-执行一个对象的动作UpdateRecorder
什么是a规则？
一个规则是一个应用于a的函数树考虑到示意图：
声明类型规则＝（树：树，上下文：示意图）=>树|可观测的<树>|规则|空白；在上面的hello world示例代码中，注意你好，世界（）函数返回一个规则．
构建和执行
让我们继续构建并执行我们的原理图:
＄纱创建$ schematics .:hello-world——foo＝酒吧几件事要注意：
- 我们正在使用原理图CLI，不是棱角CLI。
- 第一个选项是指定集合名称。在此实例中，我们指向当前目录，
．，作为收藏。 - 集合名称可选。如果省略集合名称，则使用内部集合。在前面执行“blank”示意图时，我们使用了内部集合。
- 如果我们指定集合名称，我们将使用冒号（:)分隔收集名称，然后将其分隔为原理图名称。
- 在此示例中，我们正在执行“Hello-World”的原理图。
- 最后，我们还将"foo"选项指定到原理图，其值为"bar"。
函数返回的函数中添加一条日志语句helloWorld功能:
出口功能helloWorld（选项：任何）：规则｛返回（树：树，_语境：示意图）=>｛安慰．日志（选项）；返回树；｝；｝构建并执行原理图，您现在应该看到您为原理图指定的选项的日志记录:
＄纱创建$ schematics .:hello-world——foo＝酒吧｛foo:'酒吧'｝没什么可做的。生成Hello World模板
除了注销用户指定的选项外，我们的原理图目前没有任何内容。让我们更新规则函数来使用tree.create ()方法创建新文件:
出口功能helloWorld（选项：任何）：规则｛返回（树：树，_语境：示意图）=>｛树．创建（“hello-world.html”，｀<标题>你好$ {选项．的名字｝< / h1 >｀）；返回树；｝；｝正如我们之前所知道的create ()方法接受的路径到我们正在创建的文件内容对于文件。在这个例子中，我们只是使用了的名字指定用户指定为填充a的值hello-world.html模板与字符串“hello”，后跟名称。
当我们构建并执行更新后的示意图时，我们应该看到:
＄纱建立$原理图。：你好世界 - 名称＝“角社区”——即将创建/ hello-world.html（37字节）注意:
- 我指定了
的名字选项 - 我也指定了
管制选项以避免实际的文件创建。
去除管制选项应该创建hello-world.html当前工作目录中的模板。
单元测试
Angular原理图包括一个SchematicTestRunner建立一套单元测试，以确保原理图集合的质量。
让我们测试我们新创建的Hello-World原理图：
常量集合路径＝路径．加入（__dirname.，“. . / collection.json”）；描述（“你好，世界”，（）=>｛它（“工作”，（）=>｛常量跑步者＝新的SchematicTestRunner（“图表”，集合路径）；常量树＝跑步者．runSchematic（“你好，世界”，｛｝，树．空（））；预计（树．文件．长度）．toEqual（1）；｝）；｝）；- 测试是使用Jasmine执行的，Angular开发人员应该会觉得很舒服。
- 我们新的开始
SchematicTestRunner班级，指明collectionName紧随其后的是集合路径． - 使用我们调用的测试赛道
runSchematic ()，指定这一点架构图名称，选项对象和源树． - 最后，我们断言树的文件计数已经增加到
1．
结论
我希望这是你学习Angular原理图之旅的开始。
想要更多的资源，请查看: