Angular CLI 终极指南
Angular CLI 是什么?Angular CLI 是一个命令行接口(Command Line Interface),用于实现自动化开发工作流程。它允许你做以下这些事情:
在详细介绍 Angular CLI 之前,我们先来看一下如何安装 Angular CLI。 前提条件在使用 Angular CLI 之前,你必须确保系统中 Node.js 的版本高于 若你尚未安装 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 new my-app 当运行上面的命令后,将发生以下事情:
此时 . ├── 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 可用选项
除此之外,你可以在本机上运行 运行应用程序首先进入使用 Angular CLI 创建的应用程序目录,例如: $ cd my-app 然后运行: $ ng serve 当运行上面的命令后,将发生以下事情:
若要停止应用程序,你可以使用 添加功能到现有的 Angular 应用程序你可以使用
添加新的类为了添加类名为 $ ng generate class user-profile Angular CLI 会自动调整文件名和类名的字母大小写,因此以下命令具有相同的效果: $ ng generate class user-profile $ ng generate class userProfile $ ng generate class UserProfile 运行上述命令后,在幕后将发生以下事情:
可用选项
使用示例# Generate class 'UserProfile' $ ng generate class user-profile # Generate class 'UserProfile' with unit test $ ng generate class user-profile --spec 添加新的组件若想创建一个选择器为 $ 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 运行上述命令后,在幕后将发生以下事情:
可用选项
使用示例# 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 添加新的指令若想创建一个选择器为 $ 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 运行上述命令后,在幕后将发生以下事情:
可用选项
使用示例# Generate directive 'adminLink' $ ng generate directive admin-link # Generate directive 'adminLink' without unit test $ ng generate directive admin-link --spec=false 添加新的枚举若想创建一个名为 $ ng generate enum direction installing enum create src/app/direction.enum.ts Angular CLI 会自动调整文件名和枚举名称的字母大小写,因此以下命令具有相同的效果: $ ng generate enum direction $ ng generate enum Direction 运行上述命令后,在幕后将发生以下事情:
添加新的模块若想创建一个新的模块 ,则可以运行: $ ng generate module admin installing module create src/app/admin/admin.module.ts 运行上述命令后,在幕后将发生以下事情:
需要注意的是,新增的模块不会被自动添加到 若要在其它模块中导入刚才新增的模块,可以在 import { AdminModule } from './admin/admin.module'; @NgModule({ // ... imports: [ AdminModule ] }) export class AppModule { } 可用选项
使用示例# Add module 'admin' $ ng generate module admin # Add module 'admin' with additional module containing routing information $ ng generate module admin --routing 添加新的管道若想创建一个名为 $ 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 运行上述命令后,在幕后将发生以下事情:
可用选项
使用示例# 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 添加新的服务若想创建一个名为 $ 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 运行上述命令后,在幕后将发生以下事情:
需要注意的是,Angular CLI 会提醒用户服务已成功创建,但尚未配置该服务。用户可以根据具体需求在模块或组件的 import { BackendApiService } from './backend-api.service'; @NgModule({ // ... providers: [BackendApiService],bootstrap: [AppComponent] }) 可用选项
使用示例# 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 测试框架。当添加新的功能时,我们可以利用
若要运行单元测试,则可以运行: $ 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 运行上述命令后,在幕后将发生以下事情:
运行 End-to-End 测试若要运行 e2e 测试,则可以运行: $ ng e2e 构建应用程序若要构建应用程序,则可以运行: $ ng build 运行上述命令后,在幕后将发生以下事情:
可用选项
Targets指定
若需使用 $ ng build --target=production Environments
你可以在
export const environment = { production: false };
export const environment = { production: true }; 需要注意的是,构建流程默认使用 如果指定了不同的环境,构建过程将使用相应的环境: # 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 正如你在 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". 运行上述命令后,在幕后将发生以下事情:
把应用程序与 Angular CLI 分离后,你就可以根据自己的要求自定义 参考资源
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |