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。示例代码如下:

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

本章结束,下一章继续

Angular复习笔记7-路由(上)的更多相关文章

  1. Angular复习笔记7-路由(下)

    Angular复习笔记7-路由(下) 这是angular路由的第二篇,也是最后一篇.继续上一章的内容 路由跳转 Web应用中的页面跳转,指的是应用响应某个事件,从一个页面跳转到另一个页面的行为.对于使 ...

  2. Angular复习笔记6-依赖注入

    Angular复习笔记6-依赖注入 依赖注入(DependencyInjection)是Angular实现重要功能的一种设计模式.一个大型应用的开发通常会涉及很多组件和服务,这些组件和服务之间有着错综 ...

  3. Angular复习笔记5-指令

    Angular复习笔记5-指令 在Angular中,指令是一个重要的概念,它作用在特定的DOM元素上,可以扩展这个元素的功能,为元素增加新的行为.本质上,组件可以被理解为一种带有视图的指令.组件继承自 ...

  4. angular复习笔记4-模板

    Angular复习笔记4-模板 简介 模板是一种自定义的标准化页面,通过模板和模板中的数据结合,可以生成各种各样的网页.在Angular中,模板的默认语言是HTML,几乎所有的HTML语法在模板中都是 ...

  5. angular复习笔记1-开篇

    前言 学习和使用angular已经有一段时间了.这段时间利用angular做了一个系统,算是对angular有了一个全面的认识,趁着现在有一些时间,把angular的一些知识记录一下. 安装angul ...

  6. angular学习笔记(十七)-路由和切换视图

    本篇介绍angular中如何通过判断url的hash值来显示不同的视图模板,并使用不同的控制器: 下面,通过一个例子,来一步一步说明它的用法: 我们要做一个邮箱应用,打开的时候显示的是邮件列表: 然后 ...

  7. angular复习笔记3-组件

    组件Component 组件是构成angular应用的核心,angular的有序运行依赖于组件的协同工作,组件之于angular应用就像是汽车和汽车零部件的意思. 概述 近几年的前端发展迅速,各种工程 ...

  8. angular复习笔记2-架构总览

    angular架构总览 一个完整的Angular应用主要由6个重要部分构成,分别是:组件.模板.指令.服务.依赖注入和路由.这些组成部分各司其职,而又紧密协作,它们的关系如图所示. 与用户直接交互的是 ...

  9. Angular 学习笔记 (路由外传 - RouteReuseStrategy)

    refer : https://github.com/angular/angular/issues/10929 https://stackoverflow.com/questions/41280471 ...

随机推荐

  1. 使用Qemu运行Ubuntu文件系统 —— 搭建SVE学习环境(2)

    开发环境 PC:ubuntu18.04 Qemu:4.1 Kernel:Linux-5.2 概述 由于要学习ARM的SVE技术,但是目前还没有支持SVE指令的板子,所以只能用Qemu来模拟,但是发现Q ...

  2. js处理滚动条操作

    在做UI自动化项目的时候,我们不免会遇到一些页面的内容比较多,导致会有滚动条,但是我们又主要操作当前页面看不到的元素,这怎么办呢? 在我们实际操作过程中,我们肯定是直接滑动鼠标操作就可以完成,但是在做 ...

  3. 洛谷P2634 [国家集训队]聪聪可可(点分治)

    传送门 题意: 给出一颗树,每条边都有一定的边权. 先问点之间路径和为\(3\)的倍数的点对有多少. 思路: 点分治模板题. 可以将问题转化为经过一个点\(t\)的路径和不经过点\(t\)的路径两种情 ...

  4. python关于type()与生成器generator的用法

    如果按这种形式写  type(a)(b) 那此处的b是个可迭代对象,这个对象迭代完成后,再放到type里    from pymysql._compat import range_type, text ...

  5. 文件转换神器pandoc

    pandoc  :可以在各种文件之间进行相互转化.比如从md文件转为pdf,docx转为tex文件,html文件和txt文件相互转化,等等. 在终端启用命令行执行命令. 我最近要完成的任务是把有很多个 ...

  6. 201871010102-《面向对象程序设计(java)》第6-7周学习总结

    博文正文开头:(2分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/ ...

  7. 21-C#笔记-名称空间

    和C++不同的地方: 1. 访问内部成员的方式使用 点 namespace_name.item_name; 2. using 的语法 using System; 参考: http://www.runo ...

  8. USACO Slowing down

    洛谷 P2982 [USACO10FEB]慢下来Slowing down 洛谷传送门 JDOJ 2684: USACO 2010 Feb Gold 3.Slowing down JDOJ传送门 Des ...

  9. JavaScript词法作用域—你不知道的JavaScript上卷读书笔记(一)

    前段时间在每天往返的地铁上抽空将 <你不知道的JavaScript(上卷)>读了一遍,这本书很多部分写的很是精妙,对于接触前端时间不太久的人来说,就好像是叩开了JavaScript的另一扇 ...

  10. Anaconda3(1)Windows10下安装Anaconda3(64位)详细过程

    https://blog.csdn.net/ychgyyn/article/details/82119201 前言Anaconda指的是一个开源的Python发行版本,其包含了conda.Python ...