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

$ npm install -g @angular/cli@latest

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

$ ng new my-app

现在你已经有了一个项目，想要开始填充内容：components、services、directives、guards 等。这些实体都可以使用 schematic 来生成。将 schematic 的名称作为参数传递给：

$ ng generate 

Component schematic

要生成一个名为 DashboardComponent 的 component，我们使用 component schematic：

$ 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)

你会注意到 CLI 创建了四个独立的文件（一个样式表、HTML 模板、测试 spec 和 TypeScript 文件），并且还更新了 module。我们可以通过查看 app.module.ts 内部来验证它是否被添加：

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

...

@NgModule({
  declarations: [
    DashboardComponent
  ],

...

CLI 还会构建 component，使得 models 使用 PascalCase 命名，而目录使用 kebab-case。

因此以下输入：

$ ng generate dashboard-settings

和

$ ng generate DashboardSettings

会产生相同的结果。

Service schematic

我们可以使用 service schematic 创建一个名为 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)

默认情况下，这不会为 service 生成新目录，而是将 service 和测试文件生成在当前路径中。你可以通过设置 --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)

还要注意，这不会自动将 service 添加到你的 NgModule 中，因此你需要手动添加。

Guard schematic

Guard schematic 会询问你想要实现的 interface 类型：CanActivate、CanActivateChild 或 CanLoad。你可以使用 --implements 参数直接传递，或者交互式输入。

要生成一个实现 CanActivate 的名为 AuthGuard 的 guard，输入：

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

打开生成的文件，你会看到它实现了 CanActivate interface。

Pipe schematic

Pipe schematic 会在当前目录生成一个 Pipe 并将其添加到主 module 中。你也可以使用 --module 参数指定 module。你还可以选择指定 Pipe 应该被导出。

要生成一个将被导出的名为 PhonePipe 的 pipe，调用以下命令：

$ 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)

打开 app.module.ts，你会发现 PhonePipe 已被添加到 module 中。

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

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

Directive schematic

Directive schematic 会生成一个 Angular directive。默认情况下，directive 会被添加到 module 中。

要生成一个名为 SamplingDirective 的新 directive，调用：

$ 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)

Schematic 会使用与 Angular 项目相同的 prefix 来命名 directive。例如，如果你的项目默认 prefix 设置为 "app"，则此 directive 应命名为 [appSampling]。你可以通过将 --prefix 参数传递给 CLI 来手动设置。

继续前进

这些只是 Angular CLI 提供的一些 schematic。你可以通过输入以下命令列出所有可用的 schematic：

$ ng generate --help

此外，你还可以通过在 ng generate [schematic] 后传递 --help 来获取每个 schematic 的详细信息。

Angular schematics 是帮助简化 Angular 开发的强大工具。

快乐编码！

资源

• Angular Schematics 文档