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会自动将新建的类、组件、指令、管道等集成到相应的模块中，这取决于你运行命令的目录位置。
