阅读 Angular 6/RxJS 最新教程,请访问
前端修仙之路
Angular CLI 是什么?
Angular CLI 是一个命令行接口(Command Line Interface),用于实现自动化开发工作流程。它允许你做以下这些事情:
- 创建一个新的 Angular 应用程序
- 运行带有
LiveReload
支持的开发服务器,以便在开发过程中预览应用程序 - 添加功能到现有的 Angular 应用程序
- 运行应用程序的单元测试
- 运行应用程序的端到端 (E2E) 测试
- 构建应用程序
在详细介绍 Angular CLI 之前,我们先来看一下如何安装 Angular CLI。
前提条件
在使用 Angular CLI 之前,你必须确保系统中 Node.js 的版本高于 6.9.0
且 npm 的版本高于 3.0.0
。
若你尚未安装 Node.js,你可以访问 Node.js 官网,然后根据你所用的操作系统选择对应的安装方式。
若你本机已经安装 Node.js 和 npm,你可以通过运行以下命令,确认一下当前环境信息:
$ node - v # 显示当前Node.js的版本
$ npm -v # 显示当前npm的版本
当你本机 Node.js 环境确认无误后,你可以在命令行使用 npm 安装 TypeScript:
$ npm install -g typescript # 安装最新的TypeScript稳定版
安装 Angular CLI
若要安装 Angular CLI,只需在命令行中运行以下命令:
$ npm install -g @angular/cli
验证是否成功安装 Angular CLI,可在命令行运行:
$ ng version
在我本机运行上述命令,则输出以下结果:
@angular/cli: 1.1.1
node: 6.10.2
os: darwin x64
安装完 Angular CLI,接下来我们来使用它创建新的应用程序。
创建新的 Angular 应用程序
Angular CLI 为我们提供了两种方式,用于创建新的应用程序:
- ng init – 在当前目录创建新的应用程序
- ng new – 创建新的目录,然后在新建的目录中运行
ng init
命令
因此 ng new
与 ng init
的功能是相似的,只是 ng new
会为我们创建新的目录。
假设你还未创建新的目录,那么我们需要使用 ng new
命令来创建新的项目:
$ ng new my-app
当运行上面的命令后,将发生以下事情:
- 新的
my-app
目录被创建 - 应用程序相关的源文件和目录将会被创建
- 应用程序的所有依赖 (package.json中配置的依赖项) 将会被自动安装
- 自动配置项目中的 TypeScript 开发环境
- 自动配置 Karma 单元测试环境
- 自动配置 Protractor (end-to-end) 测试环境
- 创建
environment
相关的文件并初始化为默认的设置
此时 my-app
目录中 Angular 应用程序的目录结构如下:
.
├── README.md
├── e2e
│ ├── app.e2e-spec.ts
│ ├── app.po.ts
│ └── tsconfig.e2e.json
├── karma.conf.js
├── package.json
├── protractor.conf.js
├── src
│ ├── app
│ │ ├── app.component.css
│ │ ├── app.component.html
│ │ ├── app.component.spec.ts
│ │ ├── app.component.ts
│ │ └── app.module.ts
│ ├── assets
│ ├── environments
│ │ ├── environment.prod.ts
│ │ └── environment.ts
│ ├── favicon.ico
│ ├── index.html
│ ├── main.ts
│ ├── polyfills.ts
│ ├── styles.css
│ ├── test.ts
│ ├── tsconfig.app.json
│ ├── tsconfig.spec.json
│ └── typings.d.ts
├── tsconfig.json
└── tslint.json
可用选项
-
--dry-run
: boolean, 默认为false
, 若设置dry-run
则不会创建任何文件 -
--verbose
: boolean, 默认为false
-
--link-cli
: boolean, 默认为false
, 自动链接到@angular/cli
包 -
--skip-install
: boolean, 默认为false
, 表示跳过npm install
-
--skip-git
: boolean, 默认为false
, 表示该目录不初始化为 git 仓库 -
--skip-tests
: boolean, 默认为false
, 表示不创建 tests 相关文件 -
--skip-commit
: boolean, 默认为false
, 表示不进行初始提交 -
--directory
: string, 用于设置创建的目录名,默认与应用程序的同名 -
--source-dir
: string, 默认为'src'
, 用于设置源文件目录的名称 -
--style
: string, 默认为'css'
, 用于设置选用的样式语法 ('css'
,'less'
or'scss'
) -
--prefix
: string, 默认为'app'
, 用于设置创建新组件时,组件选择器使用的前缀 -
--mobile
: boolean, 默认为false
,表示是否生成 Progressive Web App 应用程序 -
--routing
: boolean, 默认为false
, 表示新增带有路由信息的模块,并添加到根模块中 -
--inline-style
: boolean, 默认为false
, 表示当创建新的应用程序时,使用内联样式 -
--inline-template
: boolean, 默认为false
, 表示当创建新的应用程序时,使用内联模板
除此之外,你可以在本机上运行 ng generate --help
查看更多的可用选项。接下来让我们来看一下如何运行应用程序。
运行应用程序
首先进入使用 Angular CLI 创建的应用程序目录,例如:
$ cd my-app
然后运行:
$ ng serve
当运行上面的命令后,将发生以下事情:
- Angular CLI 从
.angular-cli.json
文件中加载配置信息 - Angular CLI 运行 Webpack 打包相关 JavaScript 和 CSS 文件
- Angular CLI 启动 webpack dev server 本地开发服务器,默认的地址是
localhost:4200
若要停止应用程序,你可以使用 ctrl+c
快捷键。
添加功能到现有的 Angular 应用程序
你可以使用 ng generate
命令,为已有的 Angular 应用程序添加新的功能。
-
ng generate class my-new-class
: 新建 class -
ng generate component my-new-component
: 新建组件 -
ng generate directive my-new-directive
: 新建指令 -
ng generate enum my-new-enum
: 新建枚举 -
ng generate module my-new-module
: 新建模块 -
ng generate pipe my-new-pipe
: 新建管道 -
ng generate service my-new-service
: 新建服务
ng generate
命令与其它的子命令一样,也有快捷键,具体如下:
-
ng g cl my-new-class
: 新建 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
: 新建服务
添加新的类
为了添加类名为 UserProfile
类,我们可以运行:
$ ng generate class user-profile
Angular CLI 会自动调整文件名和类名的字母大小写,因此以下命令具有相同的效果:
$ ng generate class user-profile
$ ng generate class userProfile
$ ng generate class UserProfile
运行上述命令后,在幕后将发生以下事情:
- 在
src/app
目录下将创建一个user-profile.ts
文件,该文件导出一个名为UserProfile
的类
可用选项
-
--spec
: boolean, 默认为false
, 表示是否生成单元测试相关的spec
文件
使用示例
# Generate class 'UserProfile'
$ ng generate class user-profile
# Generate class 'UserProfile' with unit test
$ ng generate class user-profile --spec
添加新的组件
若想创建一个选择器为 app-site-header
的组件,则可以运行:
$ 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
update src/app/app.module.ts
Angular CLI 将自动调整文件名和组件名称的字母大小写,并将前缀应用于组件选择器,因此以下命令具有相同的效果:
$ ng generate component site-header
$ ng generate component siteHeader
$ ng generate component SiteHeader
运行上述命令后,在幕后将发生以下事情:
-
src/app/site-header
目录被创建 site-header
目录下会生成以下四个文件:- CSS 样式文件,用于设置组件的样式
- HTML 模板文件,用于设置组件的模板
- TypeScript 文件,里面包含一个
SiteHeaderComponent
组件类和组件的元信息 - Spec 文件,包含组件相关的测试用例
-
SiteHeaderComponent
组件会被自动地添加到最近模块@NgModule
装饰器的declarations
属性中。
可用选项
-
--flat
: boolean, 默认为false
, 表示在src/app
目录下生成组件而不是在src/app/site-header
目录中 -
--inline-template
: boolean, 默认为false
, 表示使用内联模板而不是使用独立的模板文件 -
--inline-style
: boolean, 默认为false
, 表示使用内联样式而不是使用独立的样式文件 -
--prefix
: boolean, 默认为true
, 使用.angular-cli.json
配置的前缀作为组件选择器的前缀 -
--spec
: boolean, 默认为true
, 表示生成包含单元测试的 spec 文件 -
--view-encapsulation
: string, 用于设置组件的视图封装策略 -
--change-detection
: string, 用于设置组件的变化检测策略
使用示例
# 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
添加新的指令
若想创建一个选择器为 appAdminLink
的指令,则可以运行:
$ ng generate directive admin-link
installing directive
create src/app/admin-link.directive.spec.ts
create src/app/admin-link.directive.ts
update src/app/app.module.ts
Angular CLI 将自动调整文件名和指令名称的字母大小写,并将前缀应用于指令选择器,因此以下命令具有相同的效果:
$ ng generate directive admin-link
$ ng generate directive adminLink
$ ng generate directive AdminLink
运行上述命令后,在幕后将发生以下事情:
-
src/app/admin-link.directive.ts
文件被创建,该文件导出一个名为AdminLinkDirective
且选择器为appAdminLink
的指令 -
src/app/admin-link.directive.spec.ts
文件被创建,该文件包含指令相关的单元测试信息 -
AdminLinkDirective
指令会被自动地添加到最近模块@NgModule
装饰器的declarations
属性中。
可用选项
-
--flat
: boolean, 默认为true
, 表示在src/app
目录中生成指令而不是在src/app/admin-link
目录下 -
--prefix
: boolean, 默认为true
, 使用.angular-cli.json
配置的前缀作为指令选择器的前缀 -
--spec
: boolean, 默认为true
, 表示生成包含单元测试的 spec 文件
使用示例
# Generate directive 'adminLink'
$ ng generate directive admin-link
# Generate directive 'adminLink' without unit test
$ ng generate directive admin-link --spec=false
添加新的枚举
若想创建一个名为 Direction
的枚举类 ,则可以运行:
$ ng generate enum direction
installing enum
create src/app/direction.enum.ts
Angular CLI 会自动调整文件名和枚举名称的字母大小写,因此以下命令具有相同的效果:
$ ng generate enum direction
$ ng generate enum Direction
运行上述命令后,在幕后将发生以下事情:
-
src/app.direction.enum.ts
文件被创建,该文件导出名为Direction
的枚举
添加新的模块
若想创建一个新的模块 ,则可以运行:
$ ng generate module admin
installing module
create src/app/admin/admin.module.ts
运行上述命令后,在幕后将发生以下事情:
-
src/app/admin
目录被创建 - 在
src/app/admin/admin.module.ts
文件中,AdminModule
模块被创建
需要注意的是,新增的模块不会被自动添加到 src/app/app.module.ts
文件中的 AppModule
模块中,用户可以根据具体需求导入对应的模块。
若要在其它模块中导入刚才新增的模块,可以在 @NgModule
的 imports
属性中设定该新增的模块。具体示例如下:
import { AdminModule } from './admin/admin.module';
@NgModule({
// ...
imports: [
AdminModule
]
})
export class AppModule { }
可用选项
-
--routing
: boolean, 默认为false
, 表示生成一个额外包含路由信息的AdminRoutingModule
模块,且该模块会被自动地导入到新建的模块中 -
--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
添加新的管道
若想创建一个名为 convertToEuro
的管道 ,则可以运行:
$ 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
update src/app/app.module.ts
Angular CLI 会自动调整文件名和管道名称的字母大小写,因此以下命令具有相同的效果:
$ ng generate pipe convert-to-euro
$ ng generate pipe convertToEuro
$ ng generate pipe ConvertToEuro
运行上述命令后,在幕后将发生以下事情:
-
src/app/convert-to-euro.pipe.ts
文件被创建,该文件导出一个名为ConvertToEuroPipe
的管道类 -
src/app/convert-to-euro.pipe.spec.ts
文件被创建,该文件包含管道相关的单元测试信息 -
CovertToEuroPipe
管道会被自动地添加到最近模块@NgModule
装饰器的declarations
属性中。
可用选项
-
--flat
: boolean, 默认为true
, 表示在src/app
目录中生成管道而不是在src/app/convert-to-euro
目录下 -
--spec
: boolean, 默认为true
, 表示生成包含单元测试的 spec 文件
使用示例
# 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
添加新的服务
若想创建一个名为 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 会自动调整文件名和服务名称的字母大小写,因此以下命令具有相同的效果:
$ ng generate service backend-api
$ ng generate service backendApi
$ ng generate service BackendApi
运行上述命令后,在幕后将发生以下事情:
-
src/app/backend-api.service
文件被创建,该文件导出一个名为BackendApiService
的服务类 -
src/app/back-api.service.spec.ts
文件被创建,该文件包含管道相关的单元测试信息
需要注意的是,Angular CLI 会提醒用户服务已成功创建,但尚未配置该服务。用户可以根据具体需求在模块或组件的 providers
属性中配置该新建的服务。具体示例如下:
import { BackendApiService } from './backend-api.service';
@NgModule({
// ...
providers: [BackendApiService],
bootstrap: [AppComponent]
})
可用选项
-
--flat
: boolean, 默认为true
, 表示在src/app
目录中生成服务而不是在src/app/backend-api
目录下 -
--spec
: boolean, 默认为true
, 表示生成包含单元测试的 spec 文件
使用示例
# 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
运行单元测试
Angular CLI 在新建项目的时候,自动为我们集成了 Karma test runner 测试框架。当添加新的功能时,我们可以利用 --spec
选项,告诉 Angular CLI 让它为我们生成功能相关的 .spec.ts
测试单元测试文件。
spec
文件在 src
目录中相应功能的同一目录下创建,这使得我们可以在使用功能时轻松找到它们。
若要运行单元测试,则可以运行:
$ ng test
此时在你的控制台将输出以下信息:
$ ng test
[karma]: No captured browser, open http://localhost:9876/
[karma]: Karma v1.4.1 server started at http://0.0.0.0:9876/
[launcher]: Launching browser Chrome with unlimited concurrency
[launcher]: Starting browser Chrome
运行上述命令后,在幕后将发生以下事情:
- Angular CLI 从
.angular-cli.json
文件中加载配置信息 - Angular CLI 基于
.angular-cli.json
文件中的Karma
相关的配置信息,运行Karma
。Karma 的配置文件默认在根目录下,文件名为karma.conf.js
。 - Karma 打开配置中设定的浏览器,默认是
Chrome
。 - Karma 然后指示浏览器 (Chrome) 使用 Karma 配置中指定的测试框架运行
src/test.ts
。默认情况下,采用的是Jasmine
框架。创建应用程序时,会自动创建src/test.ts
文件。它预先配置为加载和配置测试Angular 应用程序所需的代码,并运行src
目录中以.spec.ts
结尾的所有文件。 - Karma 将测试结果报告给控制台。
- Karma 监听
src
目录下的文件的变化,然后自动运行单元测试。
运行 End-to-End 测试
若要运行 e2e 测试,则可以运行:
$ ng e2e
构建应用程序
若要构建应用程序,则可以运行:
$ ng build
运行上述命令后,在幕后将发生以下事情:
- Angular CLI 从
.angular-cli.json
文件中加载配置信息 - Angular CLI 运行
Webpack
打包项目相关的 JavaScript 与 CSS 文件 - 打包后的资源,将被输出到配置文件中
outDir
所指定的目录,默认是输出到dist
目录
可用选项
-
--aot
: 开启ahead-of-time
编译 -
--base-href
: string, 设置index.html
文件中<base>
元素的链接地址 -
--environment
: string, 设置所使用的环境,默认为dev
-
--output-path
: string, 设置输出的路径 -
--target
: string, 设置所使用的环境,默认为development
-
--watch
: boolean, 默认为false
, 开启watch
模式,监听文件异动并自动重新构建
Targets
指定 target
的值,会影响到构建流程的运行方式。它的可选值:
- development: 默认的模式,意味着不进行代码压缩或混淆
- production: 压缩和混淆代码
若需使用 production
模式,构建应用程序,则可以运行:
$ ng build --target=production
Environments
Environments
让你能够自定义应用程序行为。
你可以在 .angular-cli.json
文件中定义自己的 environments
文件。默认的是:
- dev:
environments/environment.ts
export const environment = {
production: false
};
- prod:
environments/environment.prod.ts
export const environment = {
production: true
};
需要注意的是,构建流程默认使用 dev
环境。
如果指定了不同的环境,构建过程将使用相应的环境:
# Uses environments/environment.ts
$ ng build
# Also uses environments/environment.ts
$ ng build --environment=dev
$ ng build --env=dev
# Uses environments/environment.prod.ts
$ ng build --environment=prod
$ ng build --env=prod
正如你在 src/main.ts
文件中看到的,通过导入 ./environments/environment
文件,我们就可以访问到 environment
相关的配置信息,具体如下:
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);
自定义构建流程
从 v1.0 开始,Angular CLI 提供了一个命令,用于将你的应用程序与 Angular CLI 分离。
默认情况下,Angular CLI 为您管理基础 Webpack 配置,因此您无需处理其复杂性。如果你希望手动配置webpack,并且您不再需要在Angular应用程序中使用Angular CLI,则可以运行:
$ ng eject
此时在你的控制台将输出以下信息:
==========================================================================================
Ejection was successful.
To run your builds, you now need to do the following commands:
- "npm run build" to build.
- "npm run test" to run unit tests.
- "npm start" to serve the app using webpack-dev-server.
- "npm run e2e" to run protractor.
Running the equivalent CLI commands will result in an error.
==========================================================================================
Some packages were added. Please run "npm install".
运行上述命令后,在幕后将发生以下事情:
-
ejected: true
的属性被添加到.angular-cli.json
文件中 - 在应用程序的根目录下将生成独立的
webpack.config.js
文件,因此你可以在没有使用Angular CLI
的环境下构建项目 -
package.json
中的构建脚本会被更新,因此你可以运行npm run build
来构建项目 -
package.json
中的测试脚本会被更新,因此你可以运行npm run test
来运行单元测试 -
package.json
中的启动脚本会被更新,因此你可以运行npm run start
或npm start
来启动开发服务器 -
package.json
中的e2e
脚本会被更新,因此你可以运行npm run e2e
来运行End-to-End
测试
把应用程序与 Angular CLI 分离后,你就可以根据自己的要求自定义 Webpack
的配置。