在 MEAN Stack 中添加路由

我们有了 Angular 前端，也有了 Node Express 后端，它们还可以与 MongoDB 数据库通信。 我们学习了所有的核心部分，并将它们连接起来。 我们只是略微触及了它的表面，还有很多功能，例如身份验证和更好的错误处理，我们将在本模块的后面部分向你展示。 我们将在前端上做更多的工作。 例如，我们还不能编辑我们的帖子，并且我们在一页上管理所有内容，但我们应该使用 Angular 渲染不同的页面。

在本模块的这个部分，我们将添加另一个页面来编辑帖子。 要创建一个多页面应用程序，我们需要 Angular 路由器。 我们可以将 post-create 和 post-list 组件加载到单独的页面上。 我们将使用以下步骤来使我们的应用程序成为多页面

1) 我们将在 Angular 应用程序的根级别添加一个新模块。 我们将创建一个新文件，并将其命名为 app-routing.module.ts。

2) 在此文件中，我们将导出一个名为 AppRoutingModule 的普通类。

现在，这成为了一个 Angular 模块，而 Angular 模块是构建块。 Angular 会分析以找出我们的应用程序使用的哪些功能，我们也可以在普通的 app.module.ts 文件中定义我们的路由。 只是一个好的做法，不要将所有内容都放入 app.module.ts 文件中，而是将我们的逻辑拆分到多个文件中。 我们会将所有的路由设置和路由配置放入一个单独的文件中，然后将其导入到我们的主 app.module 文件中。

3) 现在，我们将使用 ngModule 装饰器来装饰该类，因为它是一个 Angular 模块。 我们还将使用另一个 Angular 特性，即 RouterModule，因此也将以以下方式导入它

RouterModule 启用 Angular 路由器来处理路由配置。 没有 RouterModule，我们就不能使用 Angular 路由器。

4) 现在，我们将创建一些路由。 路由是 JavaScript 对象，我们在其中定义了要呈现的应用程序的哪个 URL 部分。 我们创建一个常量，其类型为 Routes，我们也需要从 '@angular/router' 导入它。

此常量包含一个 JavaScript 对象数组，每个对象都有一定的结构。 此对象具有一个 path 属性，该属性定义了在我们域之后想要加载某个页面的哪个部分，如果 path 为空，则表示主页或根页或起始页。

因此，localhost:4200/ 将加载此页面，并且该路径在对象中以下列方式设置

5) 定义路径后，我们需要定义应该加载什么，并且我们想要加载 PostListComponent。 我们将以下列方式定义组件

以相同的方式，我们将为我们的 PostCreateComponent 创建一个路由对象，如下所示

6) 现在，我们需要通知 Angular 路由器关于这些路由。 我们通过以下方式将路由器模块导入 Angular 模块来实现

7) 现在，Angular 路由器知道我们的路由了。 我们还需要将其添加到我们的 app 模块中，也就是我们应用程序的主模块，以及启动应用程序的模块。 要将其添加到 app 模块中，我们需要导出此配置的路由模块。 我们将以下列方式导出它

现在，我们可以将此带有路由配置的路由器模块用于 app-routing 模块之外。

8) 现在，我们将回到我们的 app 模块，并将我们的 AppRoutingModule 添加到 "imports" 数组中，我们的 IDE 会自动添加它，我们只需要确保它是否被导入。

9) 我们现在可以使用带有配置的 Angular 路由器，我们通过标记一个位置来做到这一点，Angular 应该在该位置加载活动路由。 因此，我们将回到我们的 component.html 文件，在这里我们将摆脱 <app-post-create></app-post-create> 和 <app-post-list><app-post-list>。 我们将使用路由器加载它们。

我们将为 Angular 路由器添加一个 hook，它会在其中渲染其内容。 此 hook 将使用 <router-outlet> 指令以以下方式创建

现在，如果保存它并回到 localhost:4200，我们将转到路由列表页面

现在，如果我们转到 localhost:4200/create 路由，我们将看到工具栏

10) 现在，我们缺少访问这些路由的链接，尽管如此，因为现在我们可以手动硬编码 URL。 这并不是我们真正想要导航的方式，相反，如果我们的标题中有一个链接会更好。 因此，我们将回到我们的 component.html 文件，在这里我们将用 span 包裹我们的消息，如下所示

我们还将添加一个无序列表，我们在其中以下列方式处理我们的工具栏项目

在上面的代码中，我们使用了 routerLink 属性。 routerLink 将被 Angular 路由器使用，它将锚标记变成一个普通的链接，Angular 路由器会捕获点击。 它将停止发送 HTTP 请求的默认行为，并重新渲染我们要访问的页面的页面。

现在，我们保存它并重新启动应用程序，以检查它是否正常工作。

一切运行良好。 在下一节中，我们将学习如何设计我们的链接样式以获得更好的视觉效果。

下载完整项目 (Add routing.zip)