Angular CLI 终极指南

refs:

https://segmentfault.com/a/1190000009771946

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：

$ npminstall-g typescript# 安装最新的TypeScript稳定版

安装 Angular CLI

若要安装Angular CLI，只需在命令行中运行以下命令：

$npminstall -g @angular/cli

验证是否成功安装 Angular CLI，可在命令行运行：

$ ngversion

在我本机运行上述命令，则输出以下结果：

@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命令来创建新的项目：

$ ngnewmy-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,monospace;font-size:.93em;">false
--link-cli: boolean,自动链接到@angular/cli包
--skip-install: boolean,表示跳过npm install
--skip-git: boolean,表示该目录不初始化为 git 仓库
--skip-tests: boolean,表示不创建 tests 相关文件
--skip-commit: boolean,表示不进行初始提交
--directory: string,用于设置创建的目录名，默认与应用程序的同名
--source-dir: string,monospace;font-size:.93em;">'src',用于设置源文件目录的名称
--style: string,monospace;font-size:.93em;">'css',用于设置选用的样式语法 ('less'or'scss')
--prefix: string,monospace;font-size:.93em;">'app',用于设置创建新组件时，组件选择器使用的前缀
--mobile: boolean,表示是否生成 Progressive Web App 应用程序
--routing: boolean,表示新增带有路由信息的模块，并添加到根模块中
--inline-style: boolean,表示当创建新的应用程序时，使用内联样式
--inline-template: boolean,表示当创建新的应用程序时，使用内联模板

除此之外，你可以在本机上运行ng generate --help查看更多的可用选项。接下来让我们来看一下如何运行应用程序。

运行应用程序

首先进入使用 Angular CLI 创建的应用程序目录，例如：

$cdmy-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 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 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类，我们可以运行：

generateclassuser-profile

Angular CLI 会自动调整文件名和类名的字母大小写，因此以下命令具有相同的效果：

$ ng generate class user-profile
$ ng class userProfile
$ ng class UserProfile

运行上述命令后，在幕后将发生以下事情：

在src/app目录下将创建一个user-profile.ts文件，该文件导出一个名为UserProfile的类

可用选项

生成

spec

文件

使用示例

# Generate class 'UserProfile'
$ ng generate class user-profile

# UserProfile' with unit test
$ ng generate 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 将自动调整文件名和组件名称的字母大小写，并将前缀应用于组件选择器，因此以下命令具有相同的效果：

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,表示在src/app目录下生成组件而不是在src/app/site-header目录中

文件

 
  文件
 
  --prefix: boolean,monospace;font-size:.93em;">true,使用.angular-cli.json配置的前缀作为组件选择器的前缀 
  生成包含单元测试的 spec 文件
 
  --view-encapsulation: string,用于设置组件的视图封装策略 
  --change-detection: string,用于设置组件的变化检测策略 
  
 使用示例 
 # Generate component 'site-header'
$ ng component site-header

# 'site-header' with inline template and inline styles
$ ng 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 将自动调整文件名和指令名称的字母大小写，并将前缀应用于指令选择器，因此以下命令具有相同的效果： 
 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指令会被自动地添加到最近模块src/app目录中生成指令而不是在src/app/admin-link目录下

.angular-cli.json配置的前缀作为指令选择器的前缀

生成包含单元测试的 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 会自动调整文件名和枚举名称的字母大小写，因此以下命令具有相同的效果： 
 direction
$ ng generate Direction

src/app.direction.enum.ts文件被创建，该文件导出名为Direction的枚举

添加新的模块

若想创建一个新的模块，则可以运行：

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 { }

生成一个额外包含路由信息的AdminRoutingModule模块，且该模块会被自动地导入到新建的模块中

添加src/app/admin/admin.module.spec.ts单元测试文件

 
  
 # Add module 'admin'
$ ng module admin

# Add module 'admin' with additional module containing routing information
$ ng 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 会自动调整文件名和管道名称的字母大小写，因此以下命令具有相同的效果：

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管道会被自动地添加到最近模块src/app目录中生成管道而不是在src/app/convert-to-euro目录下

Generate pipe 'convertToEuro' with spec and in /src/app directory $ ng generate pipe convert-to-euro # 'convertToEuro' without spec in /src/app/convert-to-euro directory $ ng 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 会自动调整文件名和服务名称的字母大小写，因此以下命令具有相同的效果：

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 } './backend-api.service';

// ...
  providers: [BackendApiService],bootstrap: [AppComponent]
})

src/app目录中生成服务而不是在src/app/backend-api目录下

# Generate service with DI token 'BackendApiService' in /src/app directory $ ng generate service backend-api # Generate service '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目录中相应功能的同一目录下创建，这使得我们可以在使用功能时轻松找到它们。

若要运行单元测试，则可以运行：

test

此时在你的控制台将输出以下信息：

$ ng test
[karma]: No captured browser,open http://localhost:9876/
[Karma v1.4.1 server started at http://0.0.0.0:9876/
[launcher]: Launching browser Chrome with unlimited concurrency
[Starting browser Chrome

.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.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,monospace;font-size:.93em;">development

`--watch`: boolean,开启`watch`模式，监听文件异动并自动重新构建

Targets

指定target的值，会影响到构建流程的运行方式。它的可选值：

development: 默认的模式，意味着不进行代码压缩或混淆
production: 压缩和混淆代码

若需使用production模式，构建应用程序，则可以运行：

$ ng build--target=production

Environments

Environments让你能够自定义应用程序行为。

你可以在.angular-cli.json文件中定义自己的environments文件。默认的是：

dev：environments/environment.ts

const environment = {
  production: false
};

prod：environments/environment.prod.ts

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 } '@angular/core';
import { platformBrowserDynamic } '@angular/platform-browser-dynamic';

import { AppModule } './app/app.module';
import { environment } './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" 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的配置。

参考资源

ultimate-angular-cli-reference

原文链接：https://www.f2er.com/angularjs/144802.html

Angular CLI 终极指南

Angular CLI 是什么？

前提条件

安装 Angular CLI

创建新的 Angular 应用程序

可用选项

运行应用程序

添加功能到现有的 Angular 应用程序

添加新的类

可用选项

使用示例

添加新的组件

使用示例

添加新的指令

使用示例

添加新的枚举

添加新的模块

# Add module 'admin' $ ng module admin # Add module 'admin' with additional module containing routing information $ ng module admin --routing

添加新的管道

添加新的服务

运行单元测试

运行 End-to-End 测试

构建应用程序

Targets

Environments

自定义构建流程

参考资源

猜你在找的Angularjs相关文章

`添加新的服务`

`运行单元测试`