Angular：启动和运行

第 11 章 Angular 中的路由选择

本作品已使用人工智能进行翻译。欢迎您提供反馈和意见：[e-mail]

在前面几章中，我们了解了如何扩展应用程序并创建可重复使用的服务。 我们还了解了如何使用HttpClient 模块在应用程序中集成和处理 HTTP 调用，以及如何使用可观察对象和 RxJS 处理异步流。

在本章中，我们将讨论网络应用程序的另一个常见需求，即在不同路由下封装各种页面和组件，并能在需要时对它们进行深度链接。我们将实现 Angular 内置的路由模块。此外，我们还将探讨如何使用AuthGuards 和路由器的其他功能来确保应用程序的安全。

设置 Angular 路由

在本章中，我们将根据预先编码的服务器进行构建，并使用已构建了大部分基础组件的代码库，这样我们就可以只关注关键方面。 我们将通过添加路由功能，继续扩展我们在前几章中开发的应用程序。我们将尝试添加四个路由：一个用于股票列表，一个用于创建股票，一个用于注册，还有一个用于登录。此外，我们将保护股票列表路径和创建股票路径，只有登录后才能访问。最后，我们还将添加保护措施，以确保我们不会因为从已填写的表单中跳出而丢失工作。

服务器设置

如前所述，我们将要使用的服务器已经开发完成，并已存放在第 11 章/服务器文件夹下的资源库中。 在开始任何网页开发之前，让我们先启动并运行我们的服务器。请注意，这个服务器比之前的服务器功能更多，所以请使用这个服务器，而不要继续运行之前的服务器。

签出并浏览GitHub 仓库中的chapter11/server文件夹。在该文件夹中，在终端中执行以下命令：

npm i
node index.js

这将为我们的 Node.js 服务器安装所有必要的依赖项，然后在端口 3000 上启动服务器。保持该服务器在后台运行。除了登录和注册用户外，我们的应用程序还将使用它来获取和保存库存。

警告

请注意，该服务器是一个非常简单的虚拟服务器，只有一个内存数据存储空间。如果重启服务器，您创建/保存的任何内容都将被重置。这包括你可能注册的任何用户名。

启动代码库

同样，我们将不再花时间为剩余的路由构建所有组件，也不再复习前几章已经涉及的概念，而是使用预先编码好的基础 Angular 应用程序，其中又有一些组件。 如果你打算继续编码，请注意以下新增内容，并确保将它们添加到你的应用程序中。

您可以在chapter11/base-code-base文件夹中查看代码。主要新增内容如下

• LoginComponent 和RegisterComponent

• UserService 调用 HTTP 来登录和注册用户

• UserStoreService 用来存储用户是否登录以及令牌

• StockAppInterceptor ，用于在每次请求时发送验证令牌（如果存在的话）。

所有这些也都登记在主AppModule 中。

导入路由器模块

完成所有设置后，我们就可以开始在应用程序中设置路由了。 首先是设置我们的index.html，以确保它能够为 Angular 提供足够的上下文，告诉它如何设置导航。为此，我们在index.html 中的head 元素中使用base 标签。如果应用程序是从根目录提供服务的（就像我们目前所做的），那么只需在index.html 中添加以下内容即可：

  <base href="/">

Angular CLI 会自动完成这一操作，因此您只需在从非根目录为应用程序提供服务时进行更改即可。