布莱恩F爱
从俄勒冈州波特兰的一位专注yobet英雄联盟于Angular、Web技术和Node.js的谷歌开发专家那里学习。
广告 ·ultimatecourses.com
以正确的方式学习Angular的终极课程

角示意图教程

学习如何创建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之旅的开始。

要了解更多的资源,请查看:

布莱恩F爱

嗨,我是布莱恩。我对TypeScript, Angular和Node.js感兴趣。我和我最好的朋友邦妮结婚了,我住在波特兰,我经常滑雪。