布莱恩F爱
向来自波特兰的谷歌开发者专yobet英雄联盟家学习Angular、Web技术和Node.js。
广告 ·ultimatecourses.com.
用终极课程学习角度正确的方式

角度原理图教程

了解如何创建角度原理图。

什么是原理图表?

原理图是转换现有文件系统的生成器。

有了图表,我们可以:

  • 创建文件,
  • 重构现有文件,或
  • 移动文件。

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.html37字节

注意:

  • 我指定了的名字选项
  • 我也指定了管制选项以避免实际的文件创建。

去除管制选项应该创建hello-world.html当前工作目录中的模板。

单元测试

Angular原理图包括一个SchematicTestRunner建立一套单元测试,以确保原理图集合的质量。

让我们测试我们新创建的Hello-World原理图:

常量集合路径路径加入__dirname.“. . / collection.json”描述“你好,世界”=>“工作”=>常量跑步者新的SchematicTestRunner“图表”集合路径常量跑步者runSchematic“你好,世界”预计文件长度toEqual1
  • 测试是使用Jasmine执行的,Angular开发人员应该会觉得很舒服。
  • 我们新的开始SchematicTestRunner班级,指明collectionName紧随其后的是集合路径
  • 使用我们调用的测试赛道runSchematic (),指定这一点架构图名称,选项对象和源
  • 最后,我们断言树的文件计数已经增加到1

结论

我希望这是你学习Angular原理图之旅的开始。

想要更多的资源,请查看:

布莱恩F爱

嗨,我是布莱恩。我对类型名称,Angular和node.js感兴趣我嫁给了我最好的朋友邦妮,我住在波特兰和我滑雪(很多)。