[Angular学习笔记]Angular CLI详解【转】

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 的配置。

文章转载自 Angular CLI 终极指南

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,383评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,522评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,852评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,621评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,741评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,929评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,076评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,803评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,265评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,582评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,716评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,395评论 4赞 333
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,039评论 3赞 316
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,027评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,488评论 2赞 361
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,612评论 2赞 350

推荐阅读更多精彩内容