随着 Web 技术的不断发展，越来越多的企业和开发者使用 Angular 来构建单页面应用，而 Angular-CLI 成为 Angular 开发中的必备工具之一。在这篇文章中，我们将会介绍如何使用 Angular-CLI 构建 SPA 应用的最新方法，包括安装、初始化、开发、构建和部署等过程。
安装 Angular-CLI
在开始之前，首先我们需要安装 Angular-CLI。在 Windows 上，我们可以使用以下命令来安装 Node.js 和 Angular-CLI：
# 安装 Node.js 和 npm $ choco install nodejs # 安装 Angular-CLI $ npm install -g @angular/cli
而在 Mac 上，我们可以使用 Homebrew 和 npm 来安装：
# 安装 Homebrew $ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" # 安装 Node.js 和 npm $ brew install node # 安装 Angular-CLI $ npm install -g @angular/cli
当然，我们也可以从 Angular-CLI 官网 的下载页面下载最新版本的 Angular-CLI，并按照说明进行安装。
初始化项目
成功安装 Angular-CLI 之后，我们就可以开始初始化新的项目了。在命令行中，我们可以使用以下命令来创建新的 Angular 项目：
$ ng new my-project
其中，my-project 是新项目的名称。在执行完上述命令之后，Angular-CLI 将会自动创建一个新项目的目录，并在其中生成一些基础的文件和目录结构：
-- -------------------- ---- ------- ---------- --- --------- --- ------------- --- ------------ --- ---------- --- ---- - --- ---- - - --- ------------- - - --- ---------------- - - --- ------------------ - - --- ----------------- - - --- --- - --- ------- - - --- --- - --- ------------- - - --- -------------- - - --- ------------------- - - --- --- - --- ---------- - --- --- --- ------------ --- ------------- --- ----------------- --- ------------------ --- ---
在这个新项目的目录中，我们可以看到一个 src 目录，其中包含了我们需要操作的大多数文件。其中的 app 目录则是我们的应用的核心，它包含了我们的主要组件、服务、指令、管道等等。
在进入应用目录之前，我们需要先安装一些必要的依赖项。在应用目录中，我们可以使用以下命令来安装依赖项：
$ cd my-project $ npm install
开发应用
一旦我们完成了项目初始化和依赖项的安装，我们就可以开始编写代码了。在开发之前，我们需要先运行一个本地开发服务器。在控制台中，我们可以使用以下命令来启动本地服务器：
$ ng serve
当本地开发服务器启动以后，我们就可以在浏览器中访问 http://localhost:4200 来查看我们的应用了。此时，我们可以在 src/app 目录中编辑 app.component.ts 组件文件，用于构建我们的应用。
在文件中，我们可以看到 AppComponent 类。它是这个组件的主要类，我们可以在其中添加各种逻辑和逻辑。例如，我们可以添加一个简单的控制器，来获取服务器端数据：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
----- - -------------
---- - ---
------------------- ----- ----------- --
---------- -
-------------------------------------------------------------- -- -
--------- - -----
---
-
-在代码中，我们使用了 Angular 的 HttpClient 服务来获取数据。之后，我们可以在 HTML 中使用插值语法来显示数据：
<h1>{{ title }}</h1>
<pre>{{ data | json }}</pre>构建应用
在我们编写了应用之后，我们需要对其进行构建。在应用目录下，我们可以使用以下命令来执行构建操作：
$ ng build
当构建完成后，我们就可以在 dist 目录中找到构建之后的应用。在这个目录中，我们可以看到一个整洁的、部署用的应用。这个应用包含了所有必要的文件和资源，我们现在就可以将其部署到一个 Web 服务器上了。
部署应用
最后一个步骤是部署应用。在一个 Web 服务器上，我们可以使用以下命令部署我们的应用：
$ ng deploy
重要的是指出，ng deploy 命令是需要先安装 angular-cli-ghpages 插件的。它帮助我们将构建后的应用部署到 GitHub Pages 上。这个插件非常方便，它将自动配置应用，并将其发布到我们的 GitHub Pages 中。
总结
Angular-CLI 是开发 Angular 应用的不可或缺的工具之一。在本文中，我们提供了一些指导性的信息，帮助读者学习如何使用 Angular-CLI 构建 SPA 应用。我们了解到了如何安装 Angular-CLI、初始化项目、开发应用、构建应用以及发布应用。这些信息是开发 Angular 应用的基础，通过本文的指导，我们相信读者们能够更加有效地使用 Angular-CLI 构建 SPA 应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646ed744968c7c53b0d3a9e2