Angular CLI终极参考指南

如果翻译内容对你产品困扰，可查看原文The Ultimate Angular CLI Reference Guide
在学习使用Angular CLI进行开发之前，你需要了解Angular2基础语法，可以参考我之前写的文章：angular2学习

为你的Angular项目添加功能

你可以使用ng generate命令为你的项目添加功能

• ng generate class my-new-class: 添加class到项目
• ng generate component my-new-component: 添加component到项目
• ng generate directive my-new-directive: 添加directive到项目
• ng generate enum my-new-enum: 添加enum到项目
• ng generate module my-new-module: 添加module到项目
• ng generate pipe my-new-pipe: 添加pipe到项目
• ng generate service my-new-service: 添加service到项目
  对应的缩写是：
• ng g cl my-new-class
• ng g c my-new-component
• ng g d my-new-directive
• ng g e my-new-enum
• ng g m my-new-module
• ng g p my-new-pipe
• ng g s my-new-service
  来看看每个指令

新增class（类）

新增名为UserProfile的class，执行：

$ ng generate class user-profile
installing component
  create src/app/user-profile.ts

Angular CLI 会自动调整文件名与class名的大小写，如下命令效果一致：

# All three commands are equivalent
$ ng generate class user-profile
$ ng generate class userProfile
$ ng generate class UserProfile

该命令做了什么？
名为UserProfile的空class创建在src/app/user-profile.ts文件中

可选参数

• --spec: boolean, 默认false, 生成对应的单元测试文件

举例：

生成 class 'UserProfile'

$ ng generate class user-profile

生成带单元测试的 class 'UserProfile'

$ ng generate class user-profile --spec

新增component（组件）

新增selector为'app-site-header'的component，执行：

$ ng generate component site-header
installing component
  create src/app/site-header/site-header.component.css
  create src/app/site-header/site-header.component.html
  create src/app/site-header/site-header.component.spec.ts
  create src/app/site-header/site-header.component.ts

Angular CLI会自动调整对应文件名与component名的大小写，以匹配component selector，如下命令效果一致：

# All three commands are equivalent
$ ng generate component site-header
$ ng generate component siteHeader
$ ng generate component SiteHeader

该命令做了什么？

• 创建目录src/app/site-header、
• 目录下生成4个文件：
  • component对应的css文件
  • component对应的html文件
  • ts文件，这是一个名为SiteHeaderComponent 的component class，带有‘app-site-header’selector
  • 为component做单元测试的文件，带测试例子
• 在最近的带有@NgModule 装饰器的module中，SiteHeaderComponent被添加到其declaration 中，在此例子中为src/app/app.module.ts中的AppModule

可选参数

• --flat: boolean, 默认false, 在src/app中生成component文件，而不是在src/app/site-header中
• --inline-template: boolean, 默认false, 使用inline template，而不是独立的HTML文件
• --inline-style: boolean, 默认false, 使用inline styles，而不是独立的CSS文件
• --prefix: boolean, 默认true, 使用在angular-cli.json指定的前缀来生成component selector（前缀表示selector的第一个单词）
• --spec: boolean, 默认true, 是否生成单元测试文件

举例：

Generate component 'site-header'

$ ng generate component site-header

Generate component 'site-header' with inline template and inline styles

$ ng generate component site-header --inline-template --inline-style

新增directive（指令）

要生成selector为appAdminLink的执行，运行：

$ ng generate directive admin-link
installing directive
  create src/app/admin-link.directive.spec.ts
  create src/app/admin-link.directive.ts

Angular CLI会自动调整对应文件名与directive名的大小写，以匹配directive selector，如下命令效果一致：

# All three commands are equivalent
$ ng generate directive admin-link
$ ng generate directive adminLink
$ ng generate directive AdminLink

该命令做了什么？

• 新建src/app/admin-link.directive.ts文件，并新增名为AdminLinkDirective的directive，selector为appAdminLink
• 新建src/app/admin-link.directive.spec.ts文件，为directive做单元测试

可选参数

• --flat: boolean, 默认为true, 在src/app中生成directive文件，而不是在src/app/admin-link中
• --prefix: boolean, 默认为true,使用在angular-cli.json指定前缀来生成 directive selector
• --spec: boolean, 默认为true, 是否生成单元测试文件

举例：

Generate directive 'adminLink'

$ ng generate directive admin-link

Generate directive 'adminLink' without unit test

$ ng generate directive admin-link --spec=false

新增enum（枚举）

新增名为Direction的enum ，可执行：

$ ng generate enum direction
installing enum
  create src/app/direction.enum.ts

Angular CLI会自动调整对应文件名与enum名的大小写，如下命令效果一致：

# Both commands are equivalent
$ ng generate enum direction
$ ng generate enum Direction

该命令做了什么？

• 新增src/app/direction.enum.ts文件，生成名为Direction的enum

可选参数

改命令没有可用参数

新增module（模块）

为程序新增模块，可执行：

$ ng generate module admin
installing module
  create src/app/admin/admin.module.ts
installing component
  create src/app/admin/admin.component.css
  create src/app/admin/admin.component.html
  create src/app/admin/admin.component.spec.ts
  create src/app/admin/admin.component.ts

该命令做了什么？

• 新建目录src/app/admin
• 在src/app/admin/admin.module.ts文件中新建名为AdminModule的module
• 在src/app/admin中新建名为AdminComponent的component
• component对应的css文件
• component对应的html文件
• ts文件，这是一个名为AdminComponent的component class，带有‘app-admin'的selector
• 为component做单元测试的文件，带测试例子
• 在src/app/app.module.ts中名为AppModule的module中，AdminComponent被添加到其declaration 中
  注意：AdminModule module不会自动添加到src/app/app.module.ts的mian module AppModule中，由你选择import到需要的地方
  import你的新module到其他module中，你可以将其放到其他module的imports中，例如：

import { AdminModule } from './admin/admin.module';
@NgModule({
  // ...
  imports: [
    AdminModule
  ]
})
export class AppModule { }

可用的参数

• --routing: boolean, 默认为false,新增一个与module对应的路由模块（routing module）AdminRoutingModule ，并import到module中
• --spec: boolean, 默认为false, 新建src/app/admin/admin.module.spec.ts文件用于单元测试以检查模块是否存在

举例：

Add module 'admin'

$ ng generate module admin

Add module 'admin' with additional module containing routing information

$ ng generate module admin --routing

新增pipe（管道）

pipe与AngularJS1.x中的filter等同，让你在template中改变值的显示
新增一个名为convertToEuro的pipe，可执行：

$ ng generate pipe convert-to-euro
installing pipe
  create src/app/convert-to-euro.pipe.spec.ts
  create src/app/convert-to-euro.pipe.ts

Angular CLI会自动调整对应文件名与pipe名的大小写，如下命令效果一致：

# All three commands are equivalent
$ ng generate pipe convert-to-euro
$ ng generate pipe convertToEuro
$ ng generate pipe ConvertToEuro

该命令做了什么？

• 新建文件src/app/convert-to-euro.pipe.ts，exports pipe类名为ConvertToEuroPipe
• ConvertToEuroPipe被加到最近module（带@NgModule 装饰器）的 declaration中, 在这里例子中是 src/app/app.module.ts中的AppModule

举例：

Generate pipe 'convertToEuro' with spec and in /src/app directory

$ ng generate pipe convert-to-euro

Generate pipe 'convertToEuro' without spec and in /src/app/convert-to-euro directory

$ ng generate pipe convert-to-euro --spec=false --flat=false

新增service（服务）

新建一个service名为BackendApiService，可执行：

$ ng generate service backend-api
installing service
  create src/app/backend-api.service.spec.ts
  create src/app/backend-api.service.ts
  WARNING Service is generated but not provided, it must be provided to be used

Angular CLI会自动调整对应文件名与service名的大小写，如下命令效果一致：

# All three commands are equivalent
$ ng generate service backend-api
$ ng generate service backendApi
$ ng generate service BackendApi

该命令做了什么？

• 新建src/app/backend-api.service.ts文件，exports名为BackendApiService的service类
• 新建src/app/backend-api.service.spec.ts文件，用于到新建service进行单元测试
  注意AngularCLI的警告，service创建了但还没有被注入（provided ），由你选择在使用的地方将service作为provider添加到module或者component的providers: []中，例如：

import { BackendApiService } from './backend-api.service';
@NgModule({
  // ...
  providers: [BackendApiService],
  bootstrap: [AppComponent]
})

可选参数

• --flat: boolean, 默认为true, 在src/app中生成service文件，而不是在src/app/backend-api中
• --spec: boolean, 默认为true, 是否生成单元测试文件

举例：

Generate service with DI token 'BackendApiService' in /src/app directory

$ ng generate service backend-api

Generate service with DI token 'BackendApiService' in /src/app/backend-api directory

$ ng generate service backend-api --flat=false

特别说明

AngularCLI不会盲目地为你生成代码，其使用静态分析来更好地理解你程序的语义。
例如：当使用ng generate component来新建一个组件，AngularCLI在你程序的模块树中找到最近的模块，将新组件集成到改模块中
如果你的程序中有很多模块，AngularCLI会自动将新建的类、组件、指令、管道等集成到相应的模块中，这取决于你运行命令的目录位置。