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。示例代码如下:
如果这两种方式同时使用,则第二种方式更具有优先级
本章结束,下一章继续
Angular复习笔记7-路由(上)的更多相关文章
- Angular复习笔记7-路由(下)
Angular复习笔记7-路由(下) 这是angular路由的第二篇,也是最后一篇.继续上一章的内容 路由跳转 Web应用中的页面跳转,指的是应用响应某个事件,从一个页面跳转到另一个页面的行为.对于使 ...
- Angular复习笔记6-依赖注入
Angular复习笔记6-依赖注入 依赖注入(DependencyInjection)是Angular实现重要功能的一种设计模式.一个大型应用的开发通常会涉及很多组件和服务,这些组件和服务之间有着错综 ...
- Angular复习笔记5-指令
Angular复习笔记5-指令 在Angular中,指令是一个重要的概念,它作用在特定的DOM元素上,可以扩展这个元素的功能,为元素增加新的行为.本质上,组件可以被理解为一种带有视图的指令.组件继承自 ...
- angular复习笔记4-模板
Angular复习笔记4-模板 简介 模板是一种自定义的标准化页面,通过模板和模板中的数据结合,可以生成各种各样的网页.在Angular中,模板的默认语言是HTML,几乎所有的HTML语法在模板中都是 ...
- angular复习笔记1-开篇
前言 学习和使用angular已经有一段时间了.这段时间利用angular做了一个系统,算是对angular有了一个全面的认识,趁着现在有一些时间,把angular的一些知识记录一下. 安装angul ...
- angular学习笔记(十七)-路由和切换视图
本篇介绍angular中如何通过判断url的hash值来显示不同的视图模板,并使用不同的控制器: 下面,通过一个例子,来一步一步说明它的用法: 我们要做一个邮箱应用,打开的时候显示的是邮件列表: 然后 ...
- angular复习笔记3-组件
组件Component 组件是构成angular应用的核心,angular的有序运行依赖于组件的协同工作,组件之于angular应用就像是汽车和汽车零部件的意思. 概述 近几年的前端发展迅速,各种工程 ...
- angular复习笔记2-架构总览
angular架构总览 一个完整的Angular应用主要由6个重要部分构成,分别是:组件.模板.指令.服务.依赖注入和路由.这些组成部分各司其职,而又紧密协作,它们的关系如图所示. 与用户直接交互的是 ...
- Angular 学习笔记 (路由外传 - RouteReuseStrategy)
refer : https://github.com/angular/angular/issues/10929 https://stackoverflow.com/questions/41280471 ...
随机推荐
- SpringBoot 定时任务篇
一. 基于注解@Scheduled默认为单线程,开启多个任务时,任务的执行时机会受上一个任务执行时间的影响. 1.创建定时器 使用SpringBoot基于注解来创建定时任务非常简单,只需几行代码便可完 ...
- springboot常用方法手记
1.Map方法 获取map的key和value的方法 Map<String, Object> map = new HashMap<>(); map.put("mobi ...
- AMD SATA Download (解决win10 磁盘占用100%问题)
需要下载的AMD SATA 驱动: 下载AMD SATA https://github.com/StoneIsDeveloper/UsefulTools/blob/master/AMD%20SATA/ ...
- 201871010128-杨丽霞《面向对象程序设计(java)》第二周学习总结
201871010128-杨丽霞<面向对象程序设计(java)>第二周学习总结 项目 内容 这个作业属于哪个课程 <https://www.cnblogs.com/nwnu-daiz ...
- tf–idf算法解释及其python代码
tf–idf算法python代码实现 这是我写的一个tf-idf的简单实现的代码,我们知道tfidf=tf*idf,所以可以分别计算tf和idf值在相乘,首先我们创建一个简单的语料库,作为例子,只有四 ...
- 2019南昌网络赛I:Yukino With Subinterval(CDQ) (树状数组套主席树)
题意:询问区间有多少个连续的段,而且这段的颜色在[L,R]才算贡献,每段贡献是1. 有单点修改和区间查询. 思路:46min交了第一发树套树,T了. 稍加优化多交几次就过了. 不难想到,除了L这个点, ...
- Scrapy笔记05- Item详解
Scrapy笔记05- Item详解 Item是保存结构数据的地方,Scrapy可以将解析结果以字典形式返回,但是Python中字典缺少结构,在大型爬虫系统中很不方便. Item提供了类字典的API, ...
- q1095
一,写题 1,我这个递归的错误我挺想搞出来的 int fa(int x) { ) return cnt; ==) { x=x/; cout<<"测试1:"<< ...
- css3有哪些新特性?
新选择器,属性选择器.伪类选择器.层次选择器... 圆角属性border-radius font-face加载服务器端的字体 多列布局column 阴影shadow 弹性盒flex 过渡transit ...
- CF1174E Ehab and the Expected GCD Problem(DP,数论)
题目大意:对于一个序列,定义它的价值是它的所有前缀的 $\gcd$ 中互不相同的数的个数.给定整数 $n$,问在 $1$ 到 $n$ 的排列中,有多少个排列的价值达到最大值.答案对 $10^9+7$ ...