angular 2 - 005 路由实现机制
angular2的路由是不是很神奇, url发生了变化却没有看到有任何请求发出?
1. hash模式
url类似 http://localhost:4200/#/task-list,跳转到路由页面再刷新还是会停留在当前路由。这个是我们熟知的路由实现方式, angular1.x用的是这种方式.
开启方法: app.module.ts中引入并provider
import {HashLocationStrategy, LocationStrategy} from '@angular/common';
...
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],
...
hashchange - 会添加history记录
当URL的片段标识符更改时,将触发hashchange事件 (跟在#符号后面的URL部分,包括#符号)
2. HTML5 History 模式
angular-cli里默认使用的是HTML5 History 模式,url类似 http://localhost:4200/task-list,URL看着比较舒服,比较美观。在路由页面刷新就会404, 这个需要服务端的配置支持.
现代HTML 5浏览器支持history.pushState API, 这是一项可以改变浏览器的当前地址和历史,却又不会触发服务端页面请求的技术。 太神奇了
Adding and modifying history entries
HTML5 introduced thehistory.pushState() and history.replaceState() methods, which allow you to add and modify history entries, respectively. These methods work in conjunction with the window.onpopstate
event.
pushState 和 replaceState - 添加和修改history记录
pushState可以改变当前的url却不请求这个页面, 甚至不检查其存在. 这个就是ng2路由的原理 - ng2对每一个路由执行pushState, 这样浏览器的back按钮就能工作了.
注意 pushState() 绝对不会触发 hashchange 事件,即使新的URL与旧的URL仅哈希不同也是如此。
popstate
当活动历史记录条目更改时,将触发popstate事件。如果被激活的历史记录条目是通过对history.pushState()的调用创建的,或者受到对history.replaceState()的调用的影响,popstate事件的state属性包含历史条目的状态对象的副本。
需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件。只有在做出浏览器动作时,才会触发该事件,如用户点击浏览器的回退按钮(或者在Javascript代码中调用history.back())
不同的浏览器在加载页面时处理popstate事件的形式存在差异。页面加载时Chrome和Safari通常会触发(emit )popstate事件,但Firefox则不会。
angular 2 - 005 路由实现机制的更多相关文章
- angular.js的路由和模板在asp.net mvc 中的使用
angular.js的路由和模板在asp.net mvc 中的使用 我们知道angular.js是基于mvc 的一款优秀js框架,它也有一套自己的路由机制,和asp.net mvc 路由不太一样.as ...
- (转)示例化讲解RIP路由更新机制
目录(?)[+] 以下内容摘自最新上市的“四大金刚”图书之一<Cisco路由器配置与管理完全手册>(第二版)(其它三本分别为<Cisco交换机配置与管理完全手册>(第二 ...
- Angular routing生成路由和路由的跳转
Angular routing生成路由和路由的跳转 什么是路由 路由的目的是可以让根组件按照不同的需求动态加载不同的组件. 根据不同地址,加载不同组件,实现单页面应用. Angular 命令创建一个配 ...
- Angular学习笔记—路由(转载)
创建路由 1.首先安装 Angular Router.你可以通过运行以下任一操作来执行此操作: yarn add @angular/router # OR npm i --save @angular/ ...
- Angular 监听路由变化
var app = angular.module('Mywind',['ui.router']) //Angular 监听路由变化 function run($ionicPlatform, $loca ...
- RabbitMQ学习总结(6)——消息的路由分发机制详解
一.Routing(路由) (using the Java client) 在前面的学习中,构建了一个简单的日志记录系统,能够广播所有的日志给多个接收者,在该部分学习中,将添加一个新的特点,就是可以只 ...
- AEAI ESB路由转换机制说明
1. 背景概述 相信了解数通畅联的人对AEAI ESB并不陌生,其设计器ESBDesigner中内置组件有:路由和转换.数据适配器.协议适配器.协议接入适配器等4类组件,每类组件下面包含各种类型的组件 ...
- MVC5路由系统机制详细讲解
请求一个ASP.NET mvc的网站和以前的web form是有区别的,ASP.NET MVC框架内部给我们提供了路由机制,当IIS接受到一个请求时,会先看是否请求了一个静态资源(.html,css, ...
- Angular $scope和$rootScope事件机制之$emit、$broadcast和$on
Angular按照发布/订阅模式设计了其事件系统,使用时需要“发布”事件,并在适当的位置“订阅”或“退订”事件,就像邮箱里面大量的订阅邮件一样,当我们不需要时就可以将其退订了.具体到开发中,对应着$s ...
随机推荐
- Practice| 流程控制
若整数a除以非零整数b,商为整数,且余数为零, 我们就说a能被b整除(或说b能整除a),a为被除数,b为除数,即b|a("|"是整除符号),读作"b整除a"或& ...
- POJ 1222 EXTENDED LIGHTS OUT (熄灯问题)
Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 8417 Accepted: 5441 Description In an ...
- mvc 过滤器篇
1,重写类作为特性 2 写一个controller ,让其他controller集成 四种过滤器 1身份验证过滤器 2异常处理过滤器 3行为过滤器 4结果过滤器
- waf python build 工具使用流程
waf python build 工具使用流程 waf 的 build 理念 build 了之后,可以跟踪到 ${SRC} 和 ${TGT} 有关联的文件,只有 ${SRC} 被修改过,在下次buil ...
- phpstorm自定义代码片段
右上角file--settings--Editor--Live Templates---+
- 20165220 2017-2018-2《Java程序设计》课程总结
每周作业链接汇总: 20165220 我期望的师生关系 20165220 学习基础和C语言基础调查 20165220 Linux安装及学习 20165220 第一周学习总结 20165220 第二周学 ...
- 【JavaScript】快速入门
摘抄地址快速入门 No1: JavaScript严格区分大小写 No2: JavaScript不区分整数和浮点数,统一用Number表示 NaN表示Not a Number,当无法计算结果时用NaN表 ...
- groupadd 创建组
groupadd 创建组 1 注意 :root用户才有权使用这个命令 2 groupadd -g 744 cjh 指定组ID号 3 在/etc/passwd 产生一个 组ID GID gpasswd ...
- class关键字
class的数据类型为function,可以看做构造函数的另一种写法.事实上,类的所有方法都定义在类的prototype属性上面.一.声明class class Animal { constructo ...
- 深度学习目标检测:RCNN,Fast,Faster,YOLO,SSD比较
转载出处:http://blog.csdn.net/ikerpeng/article/details/54316814 知乎的图可以放大,更清晰,链接:https://www.zhihu.com/qu ...