浅谈Angular CLI工具如何从零搭建并运行一个简单项目-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

Angular CLI是angular框架官方的一个构建工具，本篇文章给大家介绍一下开发环境，Angular CLI的安装方法，以及使用Angular CLI如何构建并运行一个简单的Angular应用。

Angular中文官网：https://angular.cn/guide/quickstart

先决条件

在开始之前，请确保你的开发环境已经包含了 Node.js? 和 npm 包管理器。

Node.js

Angular 需要 Node.js 的 8.x 或 10.x 版本。

要想检查你的版本，请在终端/控制台窗口中运行 node -v 命令。
要想安装 Node.js，请访问 nodejs.org。

【相关教程推荐：《angular教程》】

npm 包管理器

Angular、Angular CLI 和 Angular 应用都依赖于某些库所提供的特性和功能，它们都是 npm 包。要下载和安装 npm 包，你必须拥有一个 npm 包管理器。

本文中使用的是 yarn 客户端命令行界面，管理依赖包

要想检查你是否已经安装了 yarn 客户端，请在终端/控制台窗口中运行 yarn -v 命令。

第一步：安装 Angular CLI

你要使用 Angular CLI 来创建项目、创建应用和库代码，并执行多种开发任务，比如测试、打包和发布。

全局安装 Angular CLI。

要想使用 npm 来安装 CLI，请打开终端/控制台窗口，并输入下列命令：

1	`yarn global add @angular/cli`

要想检查你是否已经安装了 angular/cli，请在终端/控制台窗口中运行 ng --version 命令，下图代表安装成功。

Angular安装成功

第二步：创建工作区和初始应用

Angular 工作区就是你开发应用的上下文环境。每个工作区包含一些供一个或多个项目使用的文件。每个项目都是一组由应用、库或端到端（e2e）测试构成的文件。

要想创建工作区和初始应用项目：

运行 CLI 命令 ng new，并提供一个名字 my-app，如下所示：
ng new my-app
ng new 会提示你要把哪些特性包含在初始的应用项目中。请按回车键接受默认值。

Angular CLI 会安装必要的 Angular npm 包及其它依赖。这可能要花几分钟。

还将创建下列工作区和初始项目文件：

一个新的工作区，根目录名叫 my-app
一个初始的骨架应用项目，也叫 my-app（但位于 src 子目录下）
一个端到端测试项目（位于 e2e 子目录下）
相关的配置文件

初始的应用项目是一个简单的 “欢迎” 应用，随时可以运行它。

ng new命令后面有很多选项，详见https://angular.cn/cli/new，由于我们的项目大多使用less编写样式因此需要添加后缀--style less，代表项目中默认使用less，用于样式文件的文件扩展名或预处理程序。

完整命令：ng new my-app --style less
新建项目成功

第三步：启动开发服务器

Angular 包含一个开发服务器，以便你能轻易地在本地构建应用和启动开发服务器。

进入工作区目录（my-app）。
使用 CLI 命令 ng serve 启动开发服务器，并带上 --open 选项。

1	`ng serve --open`

ng serve 命令会自动启动服务器，并监视你的文件变化，当你修改这些文件时，它就会重新构建应用。

--open（或只用 -o）选项会自动打开浏览器，并访问 http://localhost:4200/。

第四步：编辑你的第一个 Angular 组件

组件是 Angular 应用中的基本构造块。它们在屏幕上显示数据、监听用户输入，并根据这些输入采取行动。

作为初始应用的一部分，CLI 也会为你创建第一个 Angular 组件。它就是根组件，名叫 app-root。

1、打开 ./src/app/app.component.ts。

2、把 title 属性从 'my-app' 修改成 'My First Angular App'。

src/app/app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My First Angular App!';
}

浏览器将会用修改过的标题自动刷新。

3、打开 ./src/app/app.component.less 并给这个组件提供一些样式。

src/app/app.component.less

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

漂亮多了！

工作区配置文件

每个工作空间中的所有项目共享同一个 CLI 配置环境。该工作空间的顶层包含着全工作空间级的配置文件、根应用的配置文件以及一些包含根应用的源文件和测试文件的子文件夹。

阅读剩余部分

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » 浅谈Angular CLI工具如何从零搭建并运行一个简单项目

浅谈Angular CLI工具如何从零搭建并运行一个简单项目