angular cli_使用Angular CLI原理图

最新推荐文章于 2020-09-14 16:25:00 发布

cukw6666

最新推荐文章于 2020-09-14 16:25:00 发布

阅读量443

点赞数

文章标签： python java vue 运维 linux ViewUI

原文链接：https://www.digitalocean.com/community/tutorials/angular-angular-cli-schematics

版权

angular cli

If you’re like me, when you started out working in Angular (especially when it first arrived), you quickly became exhausted by the shear number of files and configurations you had to set. Creating a new component entailed manually creating three separate files and ensuring they were put properly inside the module. Once your project began to grow, this task started to become a chore.

如果您像我一样，当您开始在Angular中工作时(尤其是它初次到达时)，您很快就对必须设置的大量剪切文件和配置感到筋疲力尽。创建新组件需要手动创建三个单独的文件，并确保将它们正确放置在模块中。一旦您的项目开始发展，这个任务就开始变得繁琐。

In comes Angular Schematics.

来了Angular Schematics 。

Angular Schematics were introduced by the Angular team in 2018, and it provides an API to generate and manage files in your Angular project, as well as providing any required dependencies. Think of it like a templating tool.

Angular Schematics是Angular团队于2018年推出的，它提供了一个API来生成和管理Angular项目中的文件以及提供任何必需的依赖项。可以将其视为模板工具。

In this article, I will show you how you can leverage the built-in schematics to streamline your Angular development.

在本文中，我将向您展示如何利用内置原理图简化Angular开发。

建立 (Setup)

The first thing we need to do is install the Angular CLI.

我们需要做的第一件事是安装Angular CLI 。

$ npm install -g @angular/cli@latest

Once that’s done, we can create a new project by running

完成后，我们可以通过运行以下命令创建一个新项目

$ ng new my-app

You now have a project and want to start populating it with stuff: components, services, directives, guards, etc. Each of these entities can be generated using a schematic. Pass the name of this schematic as an argument for:

现在，您有一个项目，并希望开始使用诸如组件，服务，指令，防护之类的东西来填充它。每个实体都可以使用原理图生成。将此原理图的名称作为以下参数传递：

$ ng generate

组件原理图 (The component schematic)

To generate a component named DashboardComponent, we use the component schematic:

要生成名为DashboardComponent的组件，我们使用component示意图：

$ ng generate component dashboard
CREATE src/app/dashboard/dashboard.component.scss (0 bytes)
CREATE src/app/dashboard/dashboard.component.html (24 bytes)
CREATE src/app/dashboard/dashboard.component.spec.ts (649 bytes)
CREATE src/app/dashboard/dashboard.component.ts (282 bytes)
UPDATE src/app/app.module.ts (487 bytes)

You’ll notice that the CLI created four separate files (a stylesheet, HTML template, test spec, and TypeScript document) and also updated the module as well. We can verify that it was added by checking inside app.module.ts:

您会注意到，CLI创建了四个单独的文件(样式表，HTML模板，测试规范和TypeScript文档)，并且还更新了模块。我们可以通过检查app.module.ts内部来验证它是否已添加：

app.module.ts

import { DashboardComponent } from './dashboard/dashboard.component';

...

@NgModule({
  declarations: [
    DashboardComponent
  ],

...

The CLI will also construct the component such that the models will have PascalCase names and the directories will be kebob-case.

CLI还将构造该组件，以使模型具有PascalCase名称，并且目录为kebob-case。

So the following inputs:

因此，以下输入：

$ ng generate dashboard-settings

and

和

$ ng generate DashboardSettings

will produce the same results.

将产生相同的结果。

服务原理图 (The service schematic)

We can create a service called SocketService by using the service schematic:

我们可以使用service原理图创建一个名为SocketService的service ：

$ ng generate service socket
CREATE src/app/services/socket.service.spec.ts (333 bytes)
CREATE src/app/services/socket.service.ts (135 bytes)

By default, this will not generate a new directory for the service, but rather will generate the service and test file in the current path. You can change this by setting --flat false:

默认情况下，这不会为服务生成新目录，而是会在当前路径中生成服务和测试文件。您可以通过设置--flat false来更改此设置：

$ ng generate service socket --flat false
CREATE src/app/services/socket/socket.service.spec.ts (333 bytes)
CREATE src/app/services/socket/socket.service.ts (135 bytes)

Also note that this does not automatically add the service to your NgModule so you will need to add it yourself.

还要注意，这不会自动将服务添加到您的NgModule中，因此您需要自己添加它。

守护原理图 (The guard schematic)

The guard schematic will ask for the type of interface you want to implement: CanActivate, CanActivateChild, or CanLoad. Pass this in directly using the --implements argument or type it in interactively.

保护原理图将询问您要实现的接口类型： CanActivate ， CanActivateChild或CanLoad 。使用--implements参数直接将其传递或以交互方式键入。

To generate a guard called AuthGuard that implements CanActivate, type:

要生成实现CanActivate称为AuthGuard的防护，请输入：

$ ng generate guard auth --implements CanActivate
CREATE src/app/auth.guard.spec.ts (346 bytes)
CREATE src/app/auth.guard.ts (456 bytes)

Opening up the generated file will show that it implements the CanActivate interface.

打开生成的文件将显示它实现了CanActivate接口。

管道示意图 (The pipe schematic)

The pipe schematic will generate a Pipe in the current directory and add it to the main module. You can also specify the module using the --module argument. You also have the option of specifying that the pipe should be exported.

管道示意图将在当前目录中生成一个管道，并将其添加到主模块中。您也可以使用--module参数指定模块。您还可以选择指定应导出管道。

To generate a pipe called PhonePipe that will be exported, call the following:

要生成将被导出的名为PhonePipe的管道，请调用以下命令：

$ ng generate pipe phone --export
CREATE src/app/phone.pipe.spec.ts (183 bytes)
CREATE src/app/phone.pipe.ts (203 bytes)
UPDATE src/app/app.module.ts (696 bytes)

Opening up app.module.ts reveals that PhonePipe has been added to the module.

打开app.module.ts显示PhonePipe已添加到模块中。

app.module.ts

import { PhonePipe } from './phone.pipe';
...

@NgModule({
  declarations: [
    PhonePipe
  ],
...
  exports: [PhonePipe]
...

指令示意图 (The directive schematic)

The directive schematic will generate an Angular directive. By default, the directive will be added to the module.

指令示意图将生成一个Angular指令。默认情况下，伪指令将添加到模块中。

To generate a new directive called SamplingDirective, call:

要生成一个名为SamplingDirective的新指令，请调用：

$ ng generate pipe sampling
CREATE src/app/sampling.directive.spec.ts (236 bytes)
CREATE src/app/sampling.directive.ts (147 bytes)
UPDATE src/app/app.module.ts (781 bytes)

The schematic will use the same prefix as the Angular project to name the directive. For example, if your project has the default prefix set to “app”, this directive should be named [appSampling]. You can manually set this by passing the --prefix argument into the CLI.

原理图将使用与Angular项目相同的前缀来命名指令。例如，如果您的项目的默认前缀设置为“ app”，则此伪指令应命名为[appSampling] 。您可以通过将--prefix参数传递到CLI中来手动设置。