Angular 是一个流行的前端框架，它非常适用于构建复杂的单页面应用程序。他的一大优点就是它提供了一系列的工具和框架，帮助我们快速创建、部署和测试应用程序。其中，使用 angular-cli 是非常方便的一种方式，可协助我们快速发布生产环境应用，本篇文章就将带您一起学如何使用 cli 工具搭建 Angular 5 应用程序。
什么是 angular-cli
Angular CLI 是一个官方的命令行工具，用于创建和管理 Angular 应用程序的项目结构。它帮助我们管理应用程序开发流程的各个方面，如构建、部署和测试。同时生成标准的 Angular 应用程序骨架极大的方便了开发者，减轻了重复劳动。
如何使用 angular-cli 创建一个 Angular 5 应用程序
本章中，将详细讲解创建一个基于 Angular 5 的应用程序的步骤：
第一步： 安装 CLI
安装 angular-cli 是第一步，你可以使用 npm 来安装它，打开命令行窗口，并执行以下命令：
npm install -g @angular/cli
如果您已经安装了 CLI，可以使用以下命令来升级:
npm update -g @angular/cli
第二步： CLI 命令
使用 ng new 命令创建一个新的 Angular 5 应用程序。
ng new my-app
上面的命令将生成一个名为“my-app”的新应用程序，并创建一个新的 Angular 5 项目。
第三步： 启动应用程序
进入项目目录并启动应用程序:
cd my-app ng serve --open
此时你的应用程序将启动，并且浏览器将自动打开 http://localhost:4200/。
第四步： 安装插件或组件
使用 ng generate 组件 或 ng add 插件 命令来生成一个组件或安装组件。
例如，我们想在应用程序中使用 Material Design 的组件，那么我们可以使用以下命令来安装：
ng add @angular/material
如果我们想要生成一个组件来显示一组数据，那么我们可以使用以下命令：
ng generate component data-display
第五步： 发布应用程序
在 CLI 中，执行以下命令构建应用程序：
ng build
该命令将应用程序构建成一个包含所有文件的目录。您可以在该目录中找到应用程序的所有css、JavaScript、HTML 和其他文件。
以上就是使用 CLI 来创建一个 Angular 5 应用程序的基本步骤。
总结
本文介绍了如何使用 angular-cli 创建 Angular 5 应用程序并对其进行构建。我们还学习了如何生成组件、安装插件以及发布应用程序。希望本文能够帮助大家更好地利用 CLI 工具来构建、部署和测试您的 Angular 应用程序。
示例代码如下：
import { Component } from '@angular/core';
@Component({
selector: 'app-data-display',
templateUrl: './data-display.component.html',
styleUrls: ['./data-display.component.css']
})
export class DataDisplayComponent {
data = ['A', 'B', 'C', 'D'];
}<div *ngFor="let item of data">
{{ item }}
</div>来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b374d7add4f0e0ffc87223