首页 > 其他分享 >Angular Schematics 实战 - 项目根目录新建一个文件

Angular Schematics 实战 - 项目根目录新建一个文件

时间:2023-07-15 10:34:21浏览次数:43  
标签:文件 schematics Schematics 创建 根目录 my Angular

Angular Schematics 是一个由 Angular 团队提供的工作流工具,用于在 Angular 应用程序中自动化开发过程。Schematics 可以创建一个新的 Angular 应用,生成简单或复杂的代码片段,或者修改现有代码以添加新功能或行为。它提供了一个可扩展的方法,允许开发者以一种可维护的方式定制或扩展他们的开发工作流。

例如,当你在 Angular CLI 中运行 ng new 命令以创建一个新的 Angular 应用程序时,实际上是使用了 Schematics。Angular CLI 使用 Schematics 来生成应用程序的基础结构和必需的文件。同样,当你使用 ng generate component 命令创建新组件时,也是使用了 Schematics。

Schematics 的工作原理

Schematics 是基于文件树的转换。它从一个原始的文件树开始(这可能是当前的项目文件系统或空的文件系统),应用一系列的转换(也就是 Schematics),并产生一个新的文件树。这个新的文件树可以用来更新实际的文件系统,也可以与原始的文件树进行比较以查看应用了 Schematics 后的变化。

每个 Schematic 都是一个函数,它接受一个 Tree 和一个 options 对象作为输入,并返回一个新的 TreeTree 是一个虚拟文件系统,用于表示项目的文件和目录。options 对象包含了应用 Schematic 时的配置选项。Schematic 可以在 Tree 上进行各种操作,如创建、更新和删除文件。

创建自定义 Schematics

虽然 Angular CLI 提供了许多内置的 Schematics,但有时你可能需要创建自己的 Schematics 来满足特定的需求。例如,你可能需要一个 Schematic 来生成符合你的公司编码标准的特定类型的组件。

为了创建自定义 Schematics,你需要安装 @angular-devkit/schematics-cli。然后,你可以使用 schematics 命令创建一个新的 Schematics 集合:

schematics blank --name=my-schematics

这将创建一个名为 my-schematics 的新目录,其中包含一个基本的 Schematics 集合结构。在 my-schematics 目录中,有一个 src 目录,其中包含一个名为 my-schematics 的 Schematic。这个 Schematic 是空的,不做任何操作。

你可以修改 my-schematics Schematic 以执行你想要的操作。

首先,你需要安装和设置 Angular Schematics。你可以使用 npm(Node 包管理器)来安装它。在你的命令行中输入以下命令:

npm install -g @angular-devkit/schematics-cli

接下来,你需要创建一个新的 schematic 项目。在你的命令行中输入以下命令:

schematics blank --name=my-schematics

这将创建一个名为 my-schematics 的新项目。你可以将 my-schematics 替换为你想要的项目名称。这个新的项目将包含一个名为 my-schematics 的文件夹,该文件夹中包含了一些基本的 schematic 文件和配置。

你的新 schematic 项目应该如下所示:

my-schematics/
├── src/
│   └── my-schematics/
│       ├── files/
│       │   └── __name@dasherize@if-flat__
│       │       └── __name@dasherize__.component.ts.template
│       ├── index.ts
│       ├── schema.json
│       └── schema.ts
├── .gitignore
├── README.md
├── package.json
└── tsconfig.json

然后,你需要在 my-schematics 文件夹中创建一个新的 schematic。在这个例子中,我们将创建一个名为 create-file 的 schematic。在你的命令行中输入以下命令:

cd my-schematics
schematics schematic --name=create-file

这将创建一个新的 create-file 文件夹,该文件夹中包含了一个 index.ts 文件和一个 schema.json 文件。你的 create-file 文件夹应该如下所示:

create-file/
├── index.ts
└── schema.json

接下来,我们将在 create-file 文件夹中创建一个名为 hello.txt 的文件。在 index.ts 文件中,你需要导入 @angular-devkit/schematics 并创建一个新的 Rule

一个 Rule 是一个接收一个 Tree 并返回一个新的 Tree 的函数。Tree 是你的项目的抽象表示,你可以用它来创建,删除和修改文件。

以下是你如何在 index.ts 文件中创建一个新的 Rule

import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';

export function createFile(_options: any): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    tree.create('/hello.txt', 'Hello, World!');
    return tree;
  };
}

在这个 Rule 中,我们使用 tree.create 方法来创建一个新的文件。这个文件的路径是 /hello.txt,它的内容是 Hello World.

标签:文件,schematics,Schematics,创建,根目录,my,Angular
From: https://www.cnblogs.com/sap-jerry/p/17555722.html

相关文章

  • 关于 Angular 应用的多语言设置问题
    考虑下面这段代码:importlocaleDefrom'@angular/common/locales/de';importlocaleJafrom'@angular/common/locales/ja';importlocaleZhfrom'@angular/common/locales/zh';这段代码从@angular/common/locales包中导入了三个不同的语言环境(locale):德语(local......
  • 网站木马文件查找之-列出2023年网站根目录下以及子目录所有php文件
    本代码适合查找网站挂马(木马)文件使用<?phpfunctionlistPhpFiles($directory){$fileList=[];$iterator=newRecursiveIteratorIterator(newRecursiveDirectoryIterator($directory));foreach($iteratoras$file){if($file->isFile()&&$......
  • 当根目录占用过高,该怎么去删除文件?- du 命令
    在使用基于linux搭建的系统或集群节点时,随着时间以及使用的增加,渐渐的我们的根目录的空间被一些“无用”文件给占用了,甚至因为根目录被占满,在linux上执行命令都会失败,那么这个时候系统已经比较危险了。基于我在工作中遇到的一些问题,简单说下解决方法:问题现象:/目录已占用了90%,对......
  • angular 学习笔记
    AngularCLI可以快速搭建框架,创建module,service,class,directive等; 注册组件,使用 @Component 注释,可以将应用程序拆分为更小的部分。 路由就是连接组件的筋络,它也是树形结构的.有了它,就可以在angular中实现路径的导航模式可以把路由看成是一组规则,它决定了url的变化对......
  • Angular Component 里 get 关键字修饰的属性的用法
    在Angular中,get关键字用于定义一个访问器属性(accessorproperty),它是一种特殊的属性,可以通过在类中定义一个带有get关键字的方法来实现。当访问这个属性时,会调用这个get方法,并返回该方法的返回值。这种方法使得访问属性时可以执行一些自定义操作,例如计算属性值、验证数据或......
  • Angular Component 里使用 const 和 readonly 修饰的属性有什么区别
    在Angular组件中,我们可以使用const和readonly关键字来修饰成员属性。这两个关键字的目的都是为了确保数据的不变性,但它们在实现和用法上有很大的区别。在本文中,我们将详细讨论这两者之间的区别,并在不少于2800字的篇幅内进行深入分析。首先,让我们了解一下const和readon......
  • 解决docker占用系统根目录磁盘的问题
    方案:(同样可以适用高版本docker)当使用低版本的docker时,并没有–data-root指定,所以方案二提供软连接形式来解决该问题依旧先停止容器服务和docker服务直接移动/var/lib/docker至/home/.docker-datacp-r/var/lib/docker/home/.docker-data删除/var/lib/dockerrm-rf/var/lib/doc......
  • angular入门
    程序设计原则:1、YAGNI:YouAre'tGonnaNeedIt(不写不需要的代码)2、DRY:Don'tRepeatYourself(不要cv自己的代码)3、OCP:OpenClosePrinciple(开闭原则:对扩展开放、对修改封闭)4、LowCoupling,HighCohesion(高内聚低耦合)5、DimeterLaw(迪米特法则,也称为"最少知识法则")一个对象/......
  • 教你学会使用Angular 应用里的 export declare const X Y
    摘要:exportdeclareconstX:Y语法用于在Angular应用程序中声明一个具有指定类型的常量变量,并将其导出,以便在其他文件中使用。本文分享自华为云社区《关于Angular应用里的exportdeclareconstXY的用法》,作者:JerryWang。最近做Spartacus的Angular开发时,遇到下面这种......
  • Angular 应用里 NullInjectorError - No provider for XX 错误的一个场景和分析过程
    最近处理客户incident,有个客户从Spartacus4升级到5.2之后,启动Storefront,console遇到了一个错误消息:NullInjectorError-NoproviderforAnonymousConsentTemplatesAdapter!引起这个错误消息的场景有很多,这个incident最后的场景是:以前的module通过loadedforroot完......