随着前端技术的快速发展，前端工程化已经变成了行业的趋势，作为前端开发者，我们必须不断地学习和掌握一些常用的工具来提高自己的效率和开发质量。
Angular 是一款流行的前端框架，而 Angular CLI 是其官方提供的命令行工具，可以轻松地搭建极简、高效、可扩展的 Angular 应用程序。
本文将详细地介绍如何使用 Angular CLI 快速搭建 SPA 应用，从安装 Angular CLI 到创建组件、服务、路由等方面逐一讲解，并通过实例代码进行实践讲解。
安装 Angular CLI
在开始之前，请确保已经安装 Node.js 和 npm，具体操作请参考Node.js官网。
安装 Angular CLI 只需要在终端执行以下命令：
npm install -g @angular/cli
安装完成后，您可以通过执行以下命令检查是否已成功安装：
ng version
如果显示了版本号，则说明成功安装。
创建新项目
使用 Angular CLI 创建新的项目非常简单，只需要执行以下命令：
ng new my-app
这将创建名为 my-app 的全新 Angular 应用程序。一旦创建完成，进入该项目并启动开发服务器：
cd my-app ng serve --open
执行完上述命令后，您将在浏览器中看到 Angular 应用程序的欢迎页。
创建组件
在 Angular 应用程序中，组件是构建应用程序的基本构建块之一。组件用于实现应用程序的各个部分，例如菜单、页脚、导航栏等。
使用 Angular CLI 创建组件非常简单，只需在终端中运行以下命令：
ng generate component my-component
这将创建一个名为 my-component 的新组件，并且自动将其添加到 AppModule 中的 declarations 数组中。
在 HTML 模板中使用该组件时，只需添加以下代码：
<app-my-component></app-my-component>
创建服务
服务是 Angular 中另一个重要的概念，它用于在组件中共享数据和状态。通过服务，多个组件可以使用相同的数据和状态，而不必在每个组件中进行复制。
使用 Angular CLI 创建服务非常简单，只需在终端中运行以下命令：
ng generate service my-service
这将创建一个名为 my-service 的新服务，并自动将其添加到应用程序的 providers 数组中。
在组件中使用该服务时，只需将其作为构造函数参数传递即可：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - --------- - ---- ----------------------- ------------ --------- ------------------- ------------ -------------------------------- ---------- --------------------------------- -- ------ ----- ----------- - ------------------- ---------- ---------- -- -
创建路由
路由是 Angular 中另一个重要的概念，它用于实现单页面应用程序。路由将 URL 映射到组件，并负责在组件之间进行导航。
使用 Angular CLI 创建路由非常简单，只需在终端中运行以下命令：
ng generate module app-routing --flat --module=app
这将创建一个名为 app-routing 的新模块，并自动将其添加到 AppModule 中的 imports 数组中。
在 app-routing 模块中，您可以定义路由，以便应用程序可以根据 URL 加载不同的组件：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- ------ - ---- ------------------ ------ - ------------- - ---- ------------------------ ------ - -------------- - ---- -------------------------- ----- ------- ------ - - - ----- --- ---------- ------------- -- - ----- -------- ---------- -------------- -- -- ----------- -------- ------------------------------- -------- -------------- -- ------ ----- ---------------- --
此示例中，路径为 '' 的 URL 将加载 HomeComponent，而路径为 '/about' 的 URL 将加载 AboutComponent。
最后，在 AppComponent 主模板中添加以下代码，以便在页面中支持路由：
<router-outlet></router-outlet>
结论
本文通过实例代码详细地介绍了如何使用 Angular CLI 快速搭建 SPA 应用程序，包括安装 Angular CLI、创建新项目、创建组件、创建服务和创建路由等方面。希望本文可以为您提供深入的学习和指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f3cec8f40ec5a964e4fe41