Angular复习笔记7-路由(上)

时间:2022-01-08 07:54:33

Angular复习笔记7-路由(上)

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

概述

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

Angular复习笔记7-路由(上)

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

Angular复习笔记7-路由(上)

首先,当用户在浏览器地址栏中输入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组件相关联。

Angular复习笔记7-路由(上)

第二部:创建根路由模块

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

Angular复习笔记7-路由(上)

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

Angular复习笔记7-路由(上)

第三步:添加RouterOutlet指令

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

Angular复习笔记7-路由(上)

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

路由策略

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

Angular复习笔记7-路由(上)

举个例子:

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

路由策略为HashLocationStrategy时,URL是http://localhost:3000/##/list。

HashLocationStrategy

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

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

Angular复习笔记7-路由(上)

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

Angular复习笔记7-路由(上)

PathLocationStrategy

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

Angular复习笔记7-路由(上)

作为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。

Angular复习笔记7-路由(上)

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

Angular复习笔记7-路由(上)

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

本章结束,下一章继续