本文介绍了 Angular 开发环境的脚手架工具 @angular/cli，包括它的安装、使用以及功能介绍，旨在帮助初学者快速进入 Angular 开发领域并规范化开发流程。
1. 什么是 @angular/cli？
@angular/cli 是 Angular 团队在 2017 年 7 月份发布的一个命令行工具，它提供了 Angular 应用开发所需的一切工具。通过使用 @angular/cli，开发者可以快速搭建 Angular 应用的基本结构，轻松进行单元测试、端到端测试和构建等操作，从而提高开发效率和代码的可维护性。
2. 安装 @angular/cli
在开始使用 @angular/cli 之前，我们需要先在本地安装它。安装 @angular/cli 有两种方式：全局安装和本地安装。这里我们介绍本地安装的方式：
npm install @angular/cli --save-dev
通过以上命令，我们可以在本地项目中安装 @angular/cli，它将作为一个本地开发依赖，只在项目开发期间使用，不会影响到全局的开发环境。
3. 使用 @angular/cli 搭建 Angular 应用
安装完成 @angular/cli 后，我们可以通过以下命令来创建一个新的 Angular 项目：
ng new my-app-name
上述命令将创建一个名为 my-app-name 的新项目，@angular/cli 将自动生成一些基本的文件和目录结构，包括：
- app 目录：包含了应用的业务逻辑代码。
- assets 目录：包含了一些不需要处理的资源，如图片、字体等。
- environments 目录：包含了项目的不同开发环境，比如开发环境、测试环境、生产环境等。
- index.html 文件：项目的入口文件，引用了 Angular 应用的主组件 AppComponent。
- styles.css 文件：样式文件，可以定义应用的全局样式。
4. @angular/cli 常用命令
使用 @angular/cli 可以轻松进行以下操作：
4.1 生成组件、指令、服务、管道等
ng generate component my-component ng generate directive my-directive ng generate service my-service ng generate pipe my-pipe
使用上述命令，我们可以快速生成 Angular 应用的常用构造器，提升组件重用率和代码可维护性。
4.2 运行应用
ng serve
运行上述命令，我们可以启动开发服务器，并在浏览器中查看应用。此时 Angular 应用会自动编译和刷新。
4.3 运行单元测试
ng test
运行上述命令，我们可以启动 Karma 测试环境，运行 Angular 应用的单元测试，便于开发者快速定位和修复代码错误。
4.4 构建应用
ng build
运行上述命令，我们可以构建应用的生产版本，输出到 dist 目录中。该版本将优化和压缩代码，提高应用的性能和速度。
5. 总结
通过使用 @angular/cli，我们可以轻松搭建 Angular 完整的开发环境，并规范化开发流程。同时，这也是 Angular 2+ 开发的必备工具之一。希望本文对初学者提供了一些参考和帮助。
6. 示例代码
- app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: '<h1>Hello Angular!</h1>'
})
export class AppComponent { }- index.html
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------- -----------
----- ---------
-------
------
-----------------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64eee882f6b2d6eab38e7e85