角示意图教程
学习如何创建Angular原理图。
图表是什么?
Schematics是转换现有文件系统的生成器。
有了原理图，我们可以:
- 创建文件,
- 重构现有文件，或者
- 移动文件。
Schematics可以做什么?
一般来说,示意图:
- 把库添加到Angular项目中，
- 在Angular项目中更新库
- 生成的代码。
在您自己的项目或组织中使用原理图的可能性是无穷无尽的。关于您或您的组织如何从创建原理图集合中获益的几个例子包括:
- 在应用程序中生成常用的UI模式。
- 使用预定义的模板或布局生成组织特定的组件。
- 实施组织架构。
角具体?
目前，是的，原理图是Angular生态系统的一部分。
CLI集成?
是的，schematics与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空白——name=hello world美元cdhello world
打开src / collection.json文件:
{“美元模式”:“. . / node_modules / @angular-devkit /图表/ collection-schema.json”,“图表”:{“hello world”:{“描述”:“一个空白示意图”。,“工厂”:”。/ hello world /指数# helloWorld”}}}
我们来回顾一下collection.json配置:
- 的
美元的模式属性指定用于验证的模式。
- 的
图表属性是一个对象，其中每个键都是的名字的示意图。
- 每个示意图都有一个
描述你猜对了，它提供了对原理图的描述。
- 每个示意图也有一个
工厂属性，即字符串它指定了原理图入口点的文件位置，然后是一个散列符号，然后是将要调用的函数;在本例中，我们将调用helloWorld ()功能hello world / index.js文件。
我们还可以为原理图指定一些附加属性:
- 可选
别名房地产是一个数组我们可以用它来为原理图指定一个或多个别名。例如，Angular cli附带的“generate”原理图的别名是“g”。这使我们能够通过执行生成命令ng g美元。
- 可选
模式属性可用于指定每个原理图的模式和该原理图可用的所有命令行选项。
同样重要的是要注意我们的项目package.json文件包含一个新的图表属性，指向src / collections.json文件:
{“名称”:“hello world”,“版本”:“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”,“@types /茉莉”:“^ 2.6.0”,“@types /节点”:“^ 8.0.31”,“茉莉花”:“^ 2.8.0”,“打字稿”:“^ 2.5.2“}}
入口函数
让我们打开src / hello world / index.ts存档和检查内容:
进口{规则,SchematicContext,树}从“@angular-devkit /图表”;出口函数helloWorld(选项:任何):规则{返回(树:树,_context:SchematicContext)= >{返回树;};}
- 我们出口
helloWorld将作为“入口函数”调用的函数。
- 该函数接受一个options参数，它是一个命令行参数键/值对的对象。
- 我们的函数是一个高阶函数，这意味着它要么接受函数引用，要么返回函数引用。在本例中，我们的函数返回一个接受
树和SchematicContext对象。
什么是树吗?
根据文件，a树是:
一个用于更改的暂存区域，包含原始文件系统，以及要应用于该系统的更改列表。
我们可以使用树来完成一些事情，包括:
read(path: string): Buffer | null;-读取指定的路径存在(路径:字符串):布尔;-判断路径是否存在create(path: string, content: Buffer | string): void;-在指定的路径上用指定的内容创建一个新文件beginUpdate(路径:字符串):UpdateRecorder;-返回一个新的UpdateRecorder实例指定路径下的文件commitUpdate(记录:UpdateRecorder):空白;-提交操作UpdateRecorder
什么是规则吗?
一个规则函数应用动作到树考虑到SchematicContext:
声明类型规则=(树:树,上下文:SchematicContext)= >树|可观测的<树>|规则|无效;
在上面的hello world示例代码中，请注意helloWorld ()函数返回一个规则。
构建和执行
让我们继续构建并执行我们的原理图:
美元纱构建$ schematics .:hello-world——foo=酒吧
以下几点需要注意:
- 我们正在使用图表CLI,不是角CLI。
- 第一个选项是指定集合名称。在本例中，我们指向当前目录，
。，作为收藏。
- 集合名称是可选的。如果省略集合名，则使用内部集合。我们以前在执行“blank”原理图时使用了内部集合。
- 如果指定集合名称，则使用冒号(:)分隔集合名称和原理图名称。
- 在这个例子中，我们正在执行“hello-world”原理图。
- 最后，我们还为原理图指定了“foo”选项，它的值是“bar”。
函数返回的函数中添加一个日志语句helloWorld功能:
出口函数helloWorld(选项:任何):规则{返回(树:树,_context:SchematicContext)= >{控制台。日志(选项);返回树;};}
构建并执行原理图，您现在应该会看到您为原理图指定的选项的日志记录:
美元纱构建$ schematics .:hello-world——foo=酒吧{foo:“酒吧”}什么也做不了。
生成一个Hello World模板
我们的原理图现在除了注销用户指定的选项之外，没有其他内容。让我们更新规则函数，以使用tree.create ()方法创建一个新文件:
出口函数helloWorld(选项:任何):规则{返回(树:树,_context:SchematicContext)= >{树。创建(“hello-world.html”,”<标题>你好$ {选项。的名字}< / h1 >”);返回树;};}
正如我们之前所了解到的create ()方法接受的路径属性创建的文件内容的文件。在本例中，我们只使用的名字值，该值为用户指定填充hello-world.html使用字符串“Hello”后跟名字的模板。
当我们构建并执行更新后的原理图时，我们应该看到:
美元纱创建$ schematics .:hello-world -name=“角社区”——即将创建/ hello-world.html(37字节)
注意:
- 我指定了
的名字选项
- 我还指定了
管制选项以避免实际的文件创建。
删除管制选项应该创建hello-world.html模板在当前工作目录中。
单元测试
Angular原理图包括SchematicTestRunner用于构建一套单元测试以确保原理图集合的质量。
让我们测试一下新创建的hello-world原理图:
常量collectionPath=路径。加入(__dirname,“. . / collection.json”);描述(“hello world”,()= >{它(“工作”,()= >{常量跑步者=新SchematicTestRunner(“图表”,collectionPath);常量树=跑步者。runSchematic(“hello world”,{},树。空());预计(树。文件。长度)。toEqual(1);});});
- 测试是用Jasmine执行的，Angular开发人员应该会觉得很舒服。
- 我们新的开始
SchematicTestRunner类,指定collectionName紧随其后的是collectionPath。
- 使用我们调用的测试运行程序
runSchematic (),指定schematicName，选项对象和源树。
- 最后，我们断言树的文件计数已经增加到
1。
结论
我希望这是你学习Angular Schematics之旅的开始。
要了解更多的资源，请查看:
学习如何创建Angular原理图。
图表是什么?
Schematics是转换现有文件系统的生成器。
有了原理图，我们可以:
- 创建文件,
- 重构现有文件，或者
- 移动文件。
Schematics可以做什么?
一般来说,示意图:
- 把库添加到Angular项目中，
- 在Angular项目中更新库
- 生成的代码。
在您自己的项目或组织中使用原理图的可能性是无穷无尽的。关于您或您的组织如何从创建原理图集合中获益的几个例子包括:
- 在应用程序中生成常用的UI模式。
- 使用预定义的模板或布局生成组织特定的组件。
- 实施组织架构。
角具体?
目前，是的，原理图是Angular生态系统的一部分。
CLI集成?
是的，schematics与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空白——name=hello world美元cdhello world打开src / collection.json文件:
{“美元模式”:“. . / node_modules / @angular-devkit /图表/ collection-schema.json”,“图表”:{“hello world”:{“描述”:“一个空白示意图”。,“工厂”:”。/ hello world /指数# helloWorld”}}}我们来回顾一下collection.json配置:
- 的
美元的模式属性指定用于验证的模式。 - 的
图表属性是一个对象，其中每个键都是的名字的示意图。 - 每个示意图都有一个
描述你猜对了，它提供了对原理图的描述。 - 每个示意图也有一个
工厂属性，即字符串它指定了原理图入口点的文件位置，然后是一个散列符号，然后是将要调用的函数;在本例中，我们将调用helloWorld ()功能hello world / index.js文件。
我们还可以为原理图指定一些附加属性:
- 可选
别名房地产是一个数组我们可以用它来为原理图指定一个或多个别名。例如，Angular cli附带的“generate”原理图的别名是“g”。这使我们能够通过执行生成命令ng g美元。 - 可选
模式属性可用于指定每个原理图的模式和该原理图可用的所有命令行选项。
同样重要的是要注意我们的项目package.json文件包含一个新的图表属性，指向src / collections.json文件:
{“名称”:“hello world”,“版本”:“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”,“@types /茉莉”:“^ 2.6.0”,“@types /节点”:“^ 8.0.31”,“茉莉花”:“^ 2.8.0”,“打字稿”:“^ 2.5.2“}}入口函数
让我们打开src / hello world / index.ts存档和检查内容:
进口{规则,SchematicContext,树}从“@angular-devkit /图表”;出口函数helloWorld(选项:任何):规则{返回(树:树,_context:SchematicContext)= >{返回树;};}- 我们出口
helloWorld将作为“入口函数”调用的函数。 - 该函数接受一个options参数，它是一个命令行参数键/值对的对象。
- 我们的函数是一个高阶函数，这意味着它要么接受函数引用，要么返回函数引用。在本例中，我们的函数返回一个接受
树和SchematicContext对象。
什么是树吗?
根据文件，a树是:
一个用于更改的暂存区域，包含原始文件系统，以及要应用于该系统的更改列表。
我们可以使用树来完成一些事情，包括:
read(path: string): Buffer | null;-读取指定的路径存在(路径:字符串):布尔;-判断路径是否存在create(path: string, content: Buffer | string): void;-在指定的路径上用指定的内容创建一个新文件beginUpdate(路径:字符串):UpdateRecorder;-返回一个新的UpdateRecorder实例指定路径下的文件commitUpdate(记录:UpdateRecorder):空白;-提交操作UpdateRecorder
什么是规则吗?
一个规则函数应用动作到树考虑到SchematicContext:
声明类型规则=(树:树,上下文:SchematicContext)= >树|可观测的<树>|规则|无效;在上面的hello world示例代码中，请注意helloWorld ()函数返回一个规则。
构建和执行
让我们继续构建并执行我们的原理图:
美元纱构建$ schematics .:hello-world——foo=酒吧以下几点需要注意:
- 我们正在使用图表CLI,不是角CLI。
- 第一个选项是指定集合名称。在本例中，我们指向当前目录，
。，作为收藏。 - 集合名称是可选的。如果省略集合名，则使用内部集合。我们以前在执行“blank”原理图时使用了内部集合。
- 如果指定集合名称，则使用冒号(:)分隔集合名称和原理图名称。
- 在这个例子中，我们正在执行“hello-world”原理图。
- 最后，我们还为原理图指定了“foo”选项，它的值是“bar”。
函数返回的函数中添加一个日志语句helloWorld功能:
出口函数helloWorld(选项:任何):规则{返回(树:树,_context:SchematicContext)= >{控制台。日志(选项);返回树;};}构建并执行原理图，您现在应该会看到您为原理图指定的选项的日志记录:
美元纱构建$ schematics .:hello-world——foo=酒吧{foo:“酒吧”}什么也做不了。生成一个Hello World模板
我们的原理图现在除了注销用户指定的选项之外，没有其他内容。让我们更新规则函数，以使用tree.create ()方法创建一个新文件:
出口函数helloWorld(选项:任何):规则{返回(树:树,_context:SchematicContext)= >{树。创建(“hello-world.html”,”<标题>你好$ {选项。的名字}< / h1 >”);返回树;};}正如我们之前所了解到的create ()方法接受的路径属性创建的文件内容的文件。在本例中，我们只使用的名字值，该值为用户指定填充hello-world.html使用字符串“Hello”后跟名字的模板。
当我们构建并执行更新后的原理图时，我们应该看到:
美元纱创建$ schematics .:hello-world -name=“角社区”——即将创建/ hello-world.html(37字节)注意:
- 我指定了
的名字选项 - 我还指定了
管制选项以避免实际的文件创建。
删除管制选项应该创建hello-world.html模板在当前工作目录中。
单元测试
Angular原理图包括SchematicTestRunner用于构建一套单元测试以确保原理图集合的质量。
让我们测试一下新创建的hello-world原理图:
常量collectionPath=路径。加入(__dirname,“. . / collection.json”);描述(“hello world”,()= >{它(“工作”,()= >{常量跑步者=新SchematicTestRunner(“图表”,collectionPath);常量树=跑步者。runSchematic(“hello world”,{},树。空());预计(树。文件。长度)。toEqual(1);});});- 测试是用Jasmine执行的，Angular开发人员应该会觉得很舒服。
- 我们新的开始
SchematicTestRunner类,指定collectionName紧随其后的是collectionPath。 - 使用我们调用的测试运行程序
runSchematic (),指定schematicName，选项对象和源树。 - 最后，我们断言树的文件计数已经增加到
1。
结论
我希望这是你学习Angular Schematics之旅的开始。
要了解更多的资源，请查看: