Angular 是一个非常流行的前端框架，它可以帮助我们构建单页应用（SPA）。而 Angular CLI 是一个构建 Angular 应用的命令行工具，它可以帮助我们快速创建、开发和构建 Angular 应用。
在这篇文章中，我们将介绍如何使用 Angular CLI 构建一个单页应用，并提供详细的教程、代码示例和指导意义。
准备工作
在开始之前，我们需要安装 Node.js 和 Angular CLI。如果你还没有安装它们，可以按照以下步骤进行安装：
下载并安装 Node.js。你可以在 Node.js 官网 上找到安装包并下载安装。
使用 npm（Node.js 包管理器）安装 Angular CLI。打开终端或命令行界面，输入以下命令：
npm install -g @angular/cli
等待安装完成后，输入以下命令检查 Angular CLI 是否安装成功：
ng version
如果成功安装，你将看到类似以下的输出：
_ _ ____ _ ___
/ \ _ __ __ _ _ | | __ _ _ __ / | | |_ |
/ △ \ | ' \ / _ | | | | |/ _ | '| | | | | | |
/ ___ | | | | (| | || | | (| | | | |__| |___ | |
// __| ||_, |_,||_,|| _|||
|___/
Angular CLI: X.X.X Node: X.X.X OS: XXXXX
现在我们已经准备好使用 Angular CLI 构建单页应用了。 ## 创建新项目 使用 Angular CLI 创建新项目非常简单。打开终端或命令行界面，进入你想要创建项目的目录，然后输入以下命令：
ng new my-app
其中，`my-app` 是你的项目名称，你可以自定义它。执行该命令后，Angular CLI 将会自动创建一个新的 Angular 项目，其中包含了一些必要的文件和目录。 在项目创建完成后，我们可以进入项目目录，并启动开发服务器：
cd my-app ng serve --open
-- -------------------- ---- ------- -------------- --- -------------------- ----------------------------------------- -- ---- - ------- ----------------------- ------- --- -------- -----------------------------
ng generate component my-component
其中，`my-component` 是你的组件名称，你可以自定义它。执行该命令后，Angular CLI 将会自动创建一个新的组件，并将其添加到项目中。 在组件创建完成后，我们可以在 `app.component.html` 中引入该组件： ```html <app-my-component></app-my-component>
现在，我们已经成功创建了一个新的组件，并将其添加到了项目中。
使用路由
在单页应用中，路由是非常重要的。它可以帮助我们实现页面之间的切换和跳转。
在 Angular 中，我们可以使用 Angular Router 来实现路由功能。而 Angular CLI 也提供了快速生成路由的命令。
打开终端或命令行界面，进入你的项目目录，然后输入以下命令：
ng generate module app-routing --flat --module=app
执行该命令后，Angular CLI 将会自动创建一个新的路由模块，并将其添加到项目中。
然后，我们可以在 app-routing.module.ts 中定义路由：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------- ------------ - ---- ------------------ ------ - ------------- - ---- ------------------------ ------ - -------------- - ---- -------------------------- ----- ------- ------ - - - ----- --- ---------- ------------- -- - ----- -------- ---------- -------------- - -- ----------- -------- ------------------------------- -------- -------------- -- ------ ----- ---------------- - -
在上述代码中，我们定义了两个路由：'' 和 'about'。它们分别对应了两个组件：HomeComponent 和 AboutComponent。
然后，我们需要在 app.module.ts 中引入路由模块：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ---------------- - ---- -----------------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- ------------------------
------ - -------------- - ---- --------------------------
-----------
------------- -
-------------
--------------
--------------
--
-------- -
--------------
----------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -现在，我们已经成功配置了路由模块，并将其添加到了项目中。
构建项目
在开发完成后，我们需要将项目构建成可部署的版本。使用 Angular CLI 构建项目非常简单。
打开终端或命令行界面，进入你的项目目录，然后输入以下命令：
ng build --prod
执行该命令后，Angular CLI 将会自动构建项目，并生成一个可部署的版本。你可以在 dist 目录中找到构建好的文件。
总结
在本文中，我们介绍了如何使用 Angular CLI 构建单页应用，并提供了详细的教程、代码示例和指导意义。希望本文能够帮助你更好地了解 Angular CLI，并在实际项目中得到应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d9694c1886fbafa46f9923