阅读 Angular 6/RxJS 最新教程,请访问 前端修仙之路
Angular CLI 是一个命令行接口(Command Line Interface),用于实现自动化开发工做流程。它容许你作如下这些事情:css
LiveReload
支持的开发服务器,以便在开发过程当中预览应用程序在详细介绍 Angular CLI 以前,咱们先来看一下如何安装 Angular CLI。html
在使用 Angular CLI 以前,你必须确保系统中 Node.js 的版本高于 6.9.0
且 npm 的版本高于 3.0.0
。前端
若你还没有安装 Node.js,你能够访问 Node.js 官网,而后根据你所用的操做系统选择对应的安装方式。node
若你本机已经安装 Node.js 和 npm,你能够经过运行如下命令,确认一下当前环境信息:webpack
$ node - v # 显示当前Node.js的版本 $ npm -v # 显示当前npm的版本
当你本机 Node.js 环境确认无误后,你能够在命令行使用 npm 安装 TypeScript:git
$ npm install -g typescript # 安装最新的TypeScript稳定版
若要安装 Angular CLI,只需在命令行中运行如下命令:github
$ npm install -g @angular/cli
验证是否成功安装 Angular CLI,可在命令行运行:web
$ ng version
在我本机运行上述命令,则输出如下结果:typescript
@angular/cli: 1.1.1 node: 6.10.2 os: darwin x64
安装完 Angular CLI,接下来咱们来使用它建立新的应用程序。shell
Angular CLI 为咱们提供了两种方式,用于建立新的应用程序:
ng init
命令所以 ng new
与 ng init
的功能是类似的,只是 ng new
会为咱们建立新的目录。
假设你还未建立新的目录,那么咱们须要使用 ng new
命令来建立新的项目:
$ ng new my-app
当运行上面的命令后,将发生如下事情:
my-app
目录被建立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.json
文件中加载配置信息localhost:4200
若要中止应用程序,你可使用 ctrl+c
快捷键。
你可使用 ng generate
命令,为已有的 Angular 应用程序添加新的功能。
ng generate class my-new-class
: 新建 classng 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
: 新建 classng 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
目录下会生成如下四个文件:
SiteHeaderComponent
组件类和组件的元信息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.json
文件中加载配置信息.angular-cli.json
文件中的 Karma
相关的配置信息,运行 Karma
。Karma 的配置文件默认在根目录下,文件名为 karma.conf.js
。Chrome
。src/test.ts
。默认状况下,采用的是 Jasmine
框架。建立应用程序时,会自动建立 src/test.ts
文件。它预先配置为加载和配置测试Angular 应用程序所需的代码,并运行 src
目录中以 .spec.ts
结尾的全部文件。src
目录下的文件的变化,而后自动运行单元测试。若要运行 e2e 测试,则能够运行:
$ ng e2e
若要构建应用程序,则能够运行:
$ ng build
运行上述命令后,在幕后将发生如下事情:
.angular-cli.json
文件中加载配置信息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
模式,监听文件异动并自动从新构建指定 target
的值,会影响到构建流程的运行方式。它的可选值:
若需使用 production
模式,构建应用程序,则能够运行:
$ ng build --target=production
Environments
让你可以自定义应用程序行为。
你能够在 .angular-cli.json
文件中定义本身的 environments
文件。默认的是:
environments/environment.ts
export const environment = { production: false };
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
的配置。