Angular复习笔记7-路由（上）

 

Angular复习笔记7-路由（上）

关于Angular路由的部分将分为上下两篇来介绍。这是第一篇。

概述

路由所要解决的核心问题是通过建立URL和页面的对应关系，使得不同的页面可以用不同的URL来表示。主流前端框架围绕这个问题给出了各自的路由实现，虽然语法和工作机制不尽相同，但理念却殊途同归。在Angular中，页面由组件构成，因此URL和页面的对应关系实质上就是URL和组件的对应关系。建立URL和组件的对应关系可通过路由配置来指定。如下图所示，路由配置包含了多个配置项。最简单的情况是，一个配置项包含了path和component两个属性，其中path属性将被Angular用来生成一个URL，而component属性则指定了该URL所对应的组件。

在定义了路由配置后，Angular路由将以其为依据来管理应用中的各个组件。下图展示了Angular路由的核心工作流程。

首先，当用户在浏览器地址栏中输入URL后，Angular将获取该URL并将其解析生成一个UrlTree实例。

其次，在路由配置中寻找并激活与UrlTree实例匹配的配置项。

再次，为配置项中指定的组件创建实例。

最后，将该组件渲染于路由组件的模板中＜router-outlet＞指令所在的位置。

本章对于各路由功能的介绍，都将围绕此工作流程来展开。

基本用法

Angular路由最基本的用法是将一个URL所对应的组件在页面中显示出来。要做到这一点，有三个必不可少的步骤，分别是定义路由配置、创建根路由模块、添加Router-Outlet指令。

第一步：路由配置

路由配置是一个Routes类型的数组，如下面的rootRouterConfig数组所示，数组的每一个元素即为一个路由配置项。下面的代码定义了两个配置项，在默认路由策略PathLocationStrategy下（关于路由策略后面会继续展开讲解），第一个配置项中path值对应的URL为http：//localhost：3000/list，与ListComponent组件相关联；第二个配置项中path值对应的URL为http：//localhost：3000/collection，与CollectionComponent组件相关联。

第二部：创建根路由模块

根路由模块包含了路由所需的各项服务，是路由工作流程得以正常执行的基础。下面的代码以路由配置rootRouterConfig为参数，通过调用RouterModule.forRoot（）方法来创建根路由模块，并将其导入到应用的根模块AppModule中。

需要注意的是，根路由模块默认提供的路由策略为PathLocationStrategy。该策略要求应用必须设置一个base路径，用于作为前缀来生成和解析URL。设置base路径最简单的方式是在index.html文件中设置＜base＞元素的href属性。路由策略将会在下一节进行详细介绍。

第三步：添加RouterOutlet指令

RouterOutlet指令的作用是在组件的模板中开辟出一块区域，用于显示URL所对应的组件。Angular将模板中使用了＜router-outlet＞标签的组件统称为路由组件。下面的代码在根组件AppComponent的模板中添加了一个＜router-outlet＞。

完成上面的三步后，就建立了一个具备基本路由功能的angular应用。

路由策略

路由策略决定Angular将使用URL的哪一部分来和路由配置项的path属性进行匹配。下图显示了URL中的路由策略，Angular提供了PathLocationStrategy和HashLocationStrategy两种路由策略，分别表示使用URL的path部分和hash部分来进行路由匹配。

举个例子：

路由策略为PathLocationStrategy时，URL是http：//localhost:3000/list。

路由策略为HashLocationStrategy时，URL是http：//localhost:3000/＃＃/list。

HashLocationStrategy

HashLocationStrategy 的原理是利用了浏览器在处理hash部分的两个特性。

第一，浏览器向服务器发送请求时不会带上hash部分的内容。如下图所示，如果通讯录采用了HashLocationStrategy，那么对于其所有配置项所对应的URL，浏览器向服务器发送的请求都为同一个，服务器只需要返回应用首页即可，Angular在获取首页后会根据hash的内容来匹配路由配置项并渲染相应的组件。

第二，更改URL的hash部分不会向服务器重新发送请求，这使得在进行跳转的时候不会引发页面的刷新和应用的重新加载。要使用该策略，只需要在注入路由服务时使用useHash属性进行显式指定即可。

PathLocationStrategy

PathLocationStrategy使用URL的path部分来进行路由匹配，因此与HashLocation-Strategy的不同之处在于，浏览器会将配置项对应的URL原封不动地发送给服务器，如下图所示。

作为Angular的默认路由策略，其最大的优点在于为服务器端渲染提供了可能。比如，当使用PathLocationStrategy策略获取联系人列表页时，浏览器会向服务器发送请求http://localhost:3000/list，服务器可以通过解析URL的path部分/list得知所访问的页面，对其进行渲染并将结果返回给浏览器；而当使用HashLocationStrategy策略时，由于hash部分不会发送到服务器，所以各页面请求的都是同一个URL，导致服务器无法通过URL得知所要访问的页面，也就无从进行渲染了。

要使用PathLocationStrategy路由策略，必须满足三个条件：

第一，浏览器需要支持HTML5的history.pushState（）方法，正是这一方法使得RouterLink指令在跳转时即使更改了URL的path部分，也依然不会引起页面刷新。

第二，需要在服务器上进行设置，将应用的所有URL重定向到应用的首页。这是因为该策略所生成的URL（如http://localhost:3000/list）在服务器上并不存在与其相对应的文件结构，如果不进行重定向，服务器将返回404错误。

第三，需要为应用设置一个base路径，Angular将以base路径为前缀来生成和解析URL。这样做的好处是服务器可以根据base路径来区分来自不同应用的请求。

如何在服务器上进行重定向设置超出了Angular的范畴，这里就不深入讲解了，接下来只对设置base路径的两种方式加以介绍。

第一种方式，如上文描述，是通过设置index.html页面中＜base＞标签的href属性来完成的。我们把＜base＞标签修改一下，将应用的base路径变为app，那么相应的联系人列表页的URL也将变为http://localhost:3000/app/list。

第二种方式，是通过向应用中注入APP_BASE_HREF变量来实现的，同样将应用的base路径设成了app。示例代码如下：

如果这两种方式同时使用，则第二种方式更具有优先级

本章结束，下一章继续