Angular 9 教程：使用 Angular CLI、Angular Router、HttpClient 和 Angular Material 构建示例应用

在本 Angular 9 教程中，我们将学习使用 HttpClient、Angular Router 和 Material Design 等 API 来构建一个示例 Web 应用程序。

我们将学习使用 Angular CLI 生成组件和服务，并将最终应用部署到云端（Firebase）。

通过学习本教程，您将掌握以下内容：

• 您将学会使用 json-server 通过 JSON 文件创建一个假的、但功能完整的 REST API 服务器。
• 您将学会将 Angular CLI v9 安装到您的开发机器上。
• 您将学会创建一个新的 Angular 9 项目。
• 您将学会使用 Angular Httplient 通过发送 HTTP 请求来从 REST API 获取数据。
• 您将学会使用 throwError() 和 catchError() 等各种 RxJS 方法来处理 HTTP 错误。
• 您将学会使用 retry() 和 takeUntil() 等各种 RxJS 方法来重试在弱网络条件下失败的 HTTP 请求，并取消待处理的请求。
• 您将学会生成 Angular 组件和服务，并将它们连接起来创建一个可工作的前端应用程序。
• 您将学会为您的应用添加路由以创建多个视图，并设置 Angular Material 来设计一个专业的 UI。
• 您将学会使用 Angular 8.3+ 中引入的 ng deploy 命令将最终应用程序包部署到 Firebase 托管。

本教程的步骤如下：

• 教程步骤 1 — 在您的开发机器上设置 Angular CLI 9
• 教程步骤 2 — 使用 Angular CLI v9 初始化您的 Angular 9 项目
• 教程步骤 3 — 在您的 Angular 9 项目中导入 Angular HttpClient
• 教程步骤 4 — 生成您的应用程序组件
• 教程步骤 5 — 在您的 Anguar 9 项目中设置路由
• 教程步骤 6 — 使用 Angular 9 Material 组件为 UI 样式
• 教程步骤 7 — 使用 JSON-server 模拟一个功能完整的 REST API
• 教程步骤 8 — 使用 Angular 9 HttpClient 发送 HTTP 请求
• 教程步骤 9 — 在您的应用程序中处理 HTTP 错误
• 教程步骤 10 — 在您的应用程序中实现分页
• 教程步骤 11 — 构建生产包并将您的 Angular 应用部署到 Firebase

本教程分为以下几个部分：

• 通过示例设置 Angular 9 HttpClient 并创建组件：在我们 Angular 9 教程的前面步骤中，我们已经使用 Angular CLI 创建了一个示例项目。现在我们将看到如何在我们的项目中导入和设置 HttpClient，我们还将创建构成 UI 的组件。
• 通过示例添加 Angular 9 路由和 Material Design：在我们 Angular 9 教程的这些步骤中，我们将继续通过设置路由器并为 home 和 about 组件添加路由来构建我们的示例应用程序。接下来，我们在项目中设置 Angular Material，并使用 MatToolbar、MatIcon、MatCard、MatButton 和 MatProgressSpinner 等 Material 组件为我们的应用程序 UI 样式。
• 构建和使用 Angular 9 REST API：通过示例使用 HttpClient 和 Services 发送 GET 请求：在我们 Angular 9 教程的这一部分，我们将使用 json-server 和 faker.js 为我们的 Angular 前端构建一个假的 REST API 后端，然后，我们将看到如何创建一个服务来向我们的后端发送 GET 请求，以获取和使用将被渲染在 home 组件中使用 ngFor 和 ngIf 指令的数据。

一如既往，让我们从先决条件开始！

注意：您可以免费下载我们的 Angular 8 图书：使用 Angular 8 构建您的第一个 Web 应用。

本教程的先决条件是什么？

在继续本教程之前，您需要确保您具备以下先决条件：

• 熟悉 TypeScript。TS 是 JavaScript 的超集，为该语言增加了强类型和 OOP 等概念，最终在 Web 浏览器执行之前会被编译成 JavaScript。
• 您的系统上安装了Node 8.9+ 和 NPM 5.5.1+。Angular CLI 需要 Node，但您的前端应用程序不需要，因为它是一项服务器端技术。您可以访问 官方网站 下载适用于您目标系统的二进制文件。您也可以使用 Node 版本管理器 在您的开发机器上快速安装和使用多个 Node.js 版本。

如果您具备先决条件，让我们继续深入研究构建一个 Angular 9 应用程序的步骤，该应用程序使用 Angular HttpClient 从 REST API 服务器获取数据，并使用 Material Design 进行显示。

教程步骤 1 — 在您的开发机器上设置 Angular CLI 9

在此步骤中，我们将在开发机器上设置 Angular CLI v9。

Angular CLI 构建在 Node.js 之上，因此如前所述，请确保您已在机器上安装了它以及 npm。

Angular CLI 是初始化和使用 Angular 项目的官方工具。

打开一个新的命令行界面并运行以下命令

$ npm install -g @angular/cli

在撰写本教程时，angular/cli v9.0.0 已安装在我们的开发机器上。

如果您成功完成了此步骤，恭喜您，您已准备好进入下一步。

教程步骤 2 — 使用 Angular CLI v9 初始化您的 Angular 9 项目

在此步骤中，我们将使用 Angular CLI 创建一个新的 Angular 9 项目。

返回到您的命令行界面，并运行以下命令：

$ cd ~  
$ ng new first-angular-app

CLI 将会询问您是否要添加 Angular 路由。请选择“是”，以及您想使用哪种样式表格式。选择CSS。

Angular CLI 将会设置一个功能齐全的项目，包含必要的文件和依赖项。您无需自己进行复杂的配置！您只需要专注于您的具体项目需求。

导航到您的项目文件夹，并使用开发服务器本地运行您的应用程序，如下所示：

$ cd first-angular-app  
$ ng serve

您的 Web 应用程序将可以通过 https://:4200/ 地址访问。

打开 Web 浏览器并导航到 https://:4200/ 地址，开始玩您的 Web 应用。

如果您能够毫无错误地在 Web 浏览器中运行您的 Angular 应用，恭喜您！您已准备好进入下一步。

总结

在我们教程的前两个步骤中，我们了解了使用 Angular 9 构建示例应用程序所需的先决条件，例如 TypeScript 知识，以及在开发机器上安装 Node.js 和 NPM。接下来，我们使用 npm install @angular/cli@next 命令从 npm 安装了 Angular CLI v9，初始化了一个新项目，并使用实时重新加载开发服务器对其进行了本地服务。

在下一步（或后续步骤）中，我们将通过设置 HttpClient 继续构建我们的示例应用程序。