Angular1.0路由的Hashbang和HTML5模式
原文答主jupiter
The documentationis not very clear about AngularJS routing. It talks about Hashbang and HTML5 mode. In fact, AngularJS routing operates in three modes:
- Hashbang Mode
- HTML5 Mode
- Hashbang in HTML5 Mode
For each mode there is a a respective LocationUrl class (LocationHashbangUrl, LocationUrl and LocationHashbangInHTML5Url).
In order to simulate URL rewriting you must actually set html5mode to true and decorate the $sniffer class as follows:
$provide.decorator('$sniffer', function($delegate) {
$delegate.history = false;
return $delegate;
});
I will now explain this in more detail:
Hashbang Mode
Configuration:
$routeProvider
.when('/path', {
templateUrl: 'path.html',
});
$locationProvider
.html5Mode(false)
.hashPrefix('!');
This is the case when you need to use URLs with hashes in your HTML files such as in
<a href="index.html#!/path">link</a>
In the Browser you must use the following Link: http://www.example.com/base/index.html#!/base/path
As you can see in pure Hashbang mode all links in the HTML files must begin with the base such as "index.html#!".
HTML5 Mode
Configuration:
$routeProvider
.when('/path', {
templateUrl: 'path.html',
});
$locationProvider
.html5Mode(true);
You should set the base in HTML-file
<html>
<head>
<base href="/">
</head>
</html>
In this mode you can use links without the # in HTML files
<a href="/path">link</a>
Link in Browser:
http://www.example.com/base/path
Hashbang in HTML5 Mode
This mode is activated when we actually use HTML5 mode but in an incompatible browser. We can simulate this mode in a compatible browser by decorating the $sniffer service and setting history to false.
Configuration:
$provide.decorator('$sniffer', function($delegate) {
$delegate.history = false;
return $delegate;
});
$routeProvider
.when('/path', {
templateUrl: 'path.html',
});
$locationProvider
.html5Mode(true)
.hashPrefix('!');
Set the base in HTML-file:
<html>
<head>
<base href="/">
</head>
</html>
In this case the links can also be written without the hash in the HTML file
<a href="/path">link</a>
Link in Browser:
http://www.example.com/index.html#!/base/path
使用最后一种, html内用{{linkPrefix}} 等于'/', 结果自动在/后面加上!#并且能回退自如,直接访问地址栏
(function () {
'use strict';
var appConfig = function ($routeProvider, jwtInterceptorProvider, $httpProvider, $locationProvider,$provide) {
$routeProvider.otherwise('/404');
//jwtInterceptorProvider.tokenGetter = function (store) {
// return store.get('jwt');
//可以使用多个decorator
$provide.decorator('$locale', function ($delegate) {
var value = $delegate.DATETIME_FORMATS;
value.SHORTDAY = [
"",
"",
"",
"",
"",
"",
""
];
return $delegate;
});
//装饰sniffer
$provide.decorator('$sniffer', function($delegate) {
$delegate.history = false;
return $delegate;
});
$httpProvider.interceptors.push('jwtInterceptor');
$httpProvider.interceptors.push('TokenInterceptor');
$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
$locationProvider.html5Mode({ enabled: true, requireBase: false, rewriteLinks: true });
$locationProvider.hashPrefix('!');
};
appConfig.$inject = ['$routeProvider', 'jwtInterceptorProvider', '$httpProvider', '$locationProvider','$provide'];
var appRun = function ($rootScope,$window, $location, jwtHelper,$translate, AuthService, $sessionStorage,deviceDetector) {
$rootScope.isMobile="is_mobile";
$rootScope.screenWidth=$window.innerWidth;
if ((deviceDetector.os==="android"||deviceDetector.os==="ios" ||deviceDetector.os==="windows-phone"||deviceDetector.device==="blackberry")&& $rootScope.screenWidth<)
$rootScope.isMobile=true;
else $rootScope.isMobile=false;
// Store user data in $rootScope.account if user is logged in
if ($sessionStorage.jwt && !jwtHelper.isTokenExpired($sessionStorage.jwt)) {
var jwt = $sessionStorage.jwt;
$rootScope.account = jwt && jwtHelper.decodeToken(jwt);
}
$rootScope.$on('$routeChangeStart', function (e, to) {
if (to.data) {
if (to.data.requiresLogin) {
// Stop users from getting to routes that have value requiresLogin set on true
if (!$sessionStorage.jwt || jwtHelper.isTokenExpired($sessionStorage.jwt)) {
e.preventDefault();
$translate("Token Expired.").then(function(value){
$rootScope.tokenExpired=value;
$window.alert($rootScope.tokenExpired);
}
);
$location.path('/');
}
} else {
// Stop users from getting to routes that have value requiresLogin set on false
if ($sessionStorage.jwt && !jwtHelper.isTokenExpired($sessionStorage.jwt)) {
e.preventDefault();
$location.path(AuthService.getLoginRedirectUrl());
}
}
}
});
};
appRun.$inject = ['$rootScope', '$window','$location', 'jwtHelper','$translate', 'AuthService', '$sessionStorage','deviceDetector'];
angular
.module('warrantyProcessApp', [
'ngRoute',
... ...
])
.config(appConfig)
.run(appRun);
})();
例子
不过我得到的路径是http://www.example.com/#!/base/path
访问根目录是http://www.example.com/#!/ ( 后面的/#!/都是访问时自动rewirte 到地址栏的 )
知乎: URL 中的 #! 是什么意思？
http://twitter.com/#!/username
http://17startup.com/#!/index
如果说是地址重写或者是restful风格为什么要用#!这么奇怪的地址呢？
但近年来 hash tag 越来越多地被用于 AJAX 请求获取数据，不同 hash tag 对应的网页内容也有所不同，为了有效地区别这种情况和过去传统的页内锚点标示，让搜索引擎更好地抓取 AJAX 数据，Google 提出的解决方案 (似乎是在 2009 年) 是用 #! (被称为 hashbang ) 来进行区分，他们将带有 #! 的 URL 称为 pretty AJAX URL (http://code.google.com/web/ajaxcrawling/docs/getting-started.html F.Y.I.)。当网页爬虫遇到这样的 URL 就会将带不同 hash tag 的 URL 当做不同内容来进行抓取，从而获得更全的信息。
Google 的这一方案如果被其他搜索引擎广泛采纳 (据说 Bing 和 Yahoo! 可能都已支持)，无疑将成为一个事实标准，如果富 AJAX 网站想进行进一步的 SEO，也就会越来越多地支持这样的格式。
Twitter 和 Google 前两年曾有过不错的合作，所以支持得比较早吧。
Google抓取#的机制
默认情况下，Google的网络蜘蛛忽视URL的#部分。但是，Google还规定，如果你希望Ajax生成的内容被浏览引擎读取，那么URL中可以使用"#!"，Google会自动将其后面的内容转成查询字符串_escaped_fragment_的值。比如，Google发现新版twitter的URL如下：http://twitter.com/#!/username就会自动抓取另一个URL：http://twitter.com/?_escaped_fragment_=/username通过这种机制，Google就可以索引动态的Ajax内容。
文章全文请参考：http://www.ruanyifeng.com/blog/2011/03/url_hash.html
传统jQuery方法:
利用 HTML5 history session management 作为历史记录:
This way you don't have to use hashes in newer browsers and that way the user won't notice a thing.
function route(path) {
$.get(path, function(data) {
//parse data
});
}
if (typeof history.pushState !== 'undefined')
{
$(window).bind('popstate', function(e)
{
route(window.location.pathname);
});
$('a').click(function(event) {
event.preventDefault();
history.pushState({},'',this.href);
});
} else {
$(window).bind('hashchange', function(e)
{
route(window.location.hash);
});
$('a').click(function(event) {
event.preventDefault();
$(this).attr('href', '/#'+$(this).attr('href'));
});
}延伸阅读:
angular 路由去除#号
http://www.cnblogs.com/breakdown/p/3785773.html
Angular1.0路由的Hashbang和HTML5模式的更多相关文章
- ASP.NET Core的路由[1]：注册URL模式与HttpHandler的映射关系
ASP.NET Core的路由是通过一个类型为RouterMiddleware的中间件来实现的.如果我们将最终处理HTTP请求的组件称为HttpHandler,那么RouterMiddleware中间 ...
- Django2.0路由层-URLconf
目录 DJango2.0路由层-URLconf 概述 urlpatterns 实例 path转换器 自定义path转换器 使用正则表达式 命名组(有名分组) URLconf匹配请求URL中的哪些部分 ...
- ThinkPHP5.0框架开发--第4章 TP5.0路由
ThinkPHP5.0框架开发--第4章 TP5.0路由 第4章 TP5.0 路由 ================================================== 上次复习 1. ...
- vue 2.0 路由切换以及组件缓存源代码重点难点分析
摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...
- $Django 虚拟环境，2.0、1.0路由层区别,Httprequest对象,视图层(fbv,cbv),文件上传
1 虚拟环境:解决问题同一台机器上可以运行不同版本的django, 1 用pychanrm创建--->files-->newproject--->选择虚拟环境 2 setting ...
- vue2.0路由
现在用vue-cli搭建的环境里面vue-router是下载好的 vue2.0路由方式和以前也有些不同 没了了map和start方法 目录结构如上图 这里有三个文件,app.vue显示,main.js ...
- vue2.0路由写法、传参和嵌套
前置知识请戳这里 vue-routerCDN地址:https://unpkg.com/vue-router@3.0.1/dist/vue-router.js vue-router下载地址:https: ...
- Django day05 虚拟环境 django 2.0和django 1.0 路由层区别
一:虚拟环境 创建虚拟环境一般有三种方式: 1) File--->New Project--> 出现如下图,点击Project Interpreter:New Virtualenv e ...
- OLE DB访问接口“MICROSOFT.JET.OLEDB.4.0”配置为在单线程单位模式下运行，所以该访问接口无法用于分布式
OLE DB访问接口"MICROSOFT.JET.OLEDB.4.0"配置为在单线程单位模式下运行,所以该访问接口无法用于分布式 数据库操作excel时遇到的以上问题的解决方法 解 ...
随机推荐
- 记录: 一次解决整型溢出攻击(使用scala,隐式转换)
最近项目遇到一次整型溢出攻击 有一个功能,玩家购买num个物品. 每个物品花费14货币. 客户端限制玩家只能购买 1-9999个该物品. 但是某玩家通过技术手段,获得了客户端的运行权限. 于是发送协议 ...
- 生成唯一标识符 ，通用唯一标识符 UUID
import java.util.UUID; /** * UUID生成工具 * */ public final class UuidGenUtils { /** * 生成一个UUID串(32个字符,其 ...
- 小菜的系统框架界面设计-XiaoCai.WinformUI代码开源
我的源码分享 曾经,看到别人漂亮的系统界面,合理的布局,可是却没有提供源码,道理很简单,就是有偿提供,实际上对于有些技巧的东西也并没有多么难,只是不懂原理,感觉到困难罢了. 而对于刚毕业的我,求知欲强 ...
- IOS开发～开机启动&无限后台运行&监听进程
非越狱情况下实现: 开机启动:App安装到IOS设备设备之后,无论App是否开启过,只要IOS设备重启,App就会随之启动: 无限后台运行:应用进入后台状态,可以无限后台运行,不被系统kill: 监听 ...
- 利用mvn/maven如何检查依赖冲突，并解决依赖冲突
mvn/maven如何检查依赖冲突,并解决依赖冲突 如图,点击图示位置,就可以把整个项目的依赖关系展示出来 在图里选中一个artifact,则所有依赖该artifact的地方都会一起连带出来突出显示, ...
- 关于 Android 平台开发相关的有哪些推荐书籍？
转自:http://www.zhihu.com/question/19579609 作者:Shan Huang 链接:http://www.zhihu.com/question/19579609/an ...
- 关于异步请求AJAX的具体解释
1,异步请求的方法步骤: 1,推断当前用户支持的浏览器类型 XMLHttpRequest:推断是否支持非IE浏览器,相应的创建方法:xmlhttp = new XMLHttpRequest(); wi ...
- Shell脚本部分语法
Shell中的变量 Linux Shell中的变量分为“系统变量”和“用户自定义变量”,可以通过set命令查看那系统变量 系统变量:$HOME.$PWD.$SHELL.$USER等等 显示当前sh ...
- hdu1595 find the longest of the shortest(Dijkstra)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1595 find the longest of the shortest Time Limit: 100 ...
- es6 - 箭头
class User { constructor(name, age) { this.name = name; this.age = age; } changeName(name) { this.na ...