Angular 是一个流行的前端框架，它可以用于构建单页应用程序（SPA）。在本文中，我们将介绍如何使用 Angular6 及以上版本构建一个 SPA 应用程序。我们将从入门开始，一步一步地深入学习 Angular，直到精通这个框架。
Angular 简介
Angular 是一个由 Google 开发的前端框架。它是一个 TypeScript 编写的框架，它提供了一套完整的工具和组件，以帮助开发人员构建复杂的单页应用程序。它使用了一些现代 Web 技术，如模块化、组件化、依赖注入和 RxJS 等。
Angular6 及以上版本的 SPA 应用程序搭建
在开始构建 Angular 的应用程序之前，我们需要安装一些必要的工具和依赖项，如 Node.js 和 Angular CLI。安装方法如下:
- 安装 Node.js，从官网下载并安装最新版本的 Node.js。
- 安装 Angular CLI，打开终端窗口，运行以下命令：
npm install -g @angular/cli
- 创建一个新的 Angular 项目，打开终端窗口，定位到你要创建项目的文件夹，然后运行以下命令：
ng new my-app
- 等待安装过程完成，这可能需要几分钟的时间。这将在你的项目目录中创建一个名为 "my-app" 的新项目。
现在我们已经创建了一个新的 Angular 项目。我们可以使用 Angular CLI 快速生成一些组件、服务、指令等。
创建组件
组件是 Angular 应用程序的基本构建块之一。一个组件将会有它自己的 HTML 模版、CSS 样式表和一些 JavaScript 代码。我们可以使用 Angular CLI 快速创建一个组件。打开终端窗口，运行以下命令：
ng generate component my-component
这将会在你的项目中创建一个名为 "my-component" 的新组件。你可以在你的项目中找到它，并查看生成的文件。现在我们将在 AppComponent 中使用这个组件。
在 App 组件中使用 my-component
打开 "app.component.html" 文件, 你应该会看到以下代码:
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<img width="300" src="./../assets/angular-logo.png">
</div>
<router-outlet></router-outlet>这是 App 组件的 HTML 模板，它包含了一个标题和一个图片。我们将在这个模板中添加一个新组件 "my-component"。首先，在项目根目录下找到 "app.module.ts" 文件，然后在它的 imports 数组中添加以下代码：
import { MyComponentComponent } from './my-component/my-component.component';然后，在 "app.component.html" 文件中添加以下代码：
<app-my-component></app-my-component>
这将会在 App 组件的 HTML 模板中添加一个新的 "my-component"。
创建服务
服务是 Angular 应用程序中的另一个重要概念。服务可以用来共享数据或提供一些业务逻辑。我们可以使用 Angular CLI 快速创建一个服务。打开终端窗口，运行以下命令：
ng generate service my-service
这将会在你的项目中创建一个名为 "my-service" 的新服务。你可以在你的项目中找到它，并查看生成的文件。现在我们将在 AppComponent 中使用这个服务。
在 App 组件中使用 my-service
首先，在项目根目录下找到 "app.module.ts" 文件，然后在它的 providers 数组中添加以下代码：
-- -------------------- ---- -------
------ - ---------------- - ---- -----------------------
-----------
------------- -
-------------
--------------------
--
-------- -
--------------
----------------
--
---------- -------------------
---------- --------------
--
------ ----- --------- - -然后，在你的组件中引入这个服务：
import { MyServiceService } from '../my-service.service';接着在组件的 constructor 中注入它：
constructor(private myService: MyServiceService) {}现在，我们可以使用这个服务了。比如，在组件中调用该服务的一个方法：
this.myService.getData().subscribe(data => {
console.log(data);
});getData() 方法应该返回一个 Observable，其中包含了一些数据。
总结
在本篇文章中，我们介绍了 Angular 框架以及如何使用 Angular6 及以上版本构建一个 SPA 应用程序。我们学习了如何创建组件、服务以及如何在组件中使用它们。在你的下一个项目中，你应该能够轻松使用 Angular 来构建一个完整的应用程序。看到这里，你应该已经掌握了 Angular 的基础知识和一些常用技巧，可以尝试自己构建一个小项目，加深对Angular的理解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64aba54948841e9894774a11