原文答主jupiter

http://stackoverflow.com/questions/16677528/location-switching-between-html5-and-hashbang-mode-link-rewritingdown vote

The documentationis not very clear about AngularJS routing. It talks about Hashbang and HTML5 mode. In fact, AngularJS routing operates in three modes:

  1. Hashbang Mode
  2. HTML5 Mode
  3. 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 到地址栏的 )

twitter和17startup的地址url中都有#!，被称为pretty ajax url 
http://twitter.com/#!/username 
http://17startup.com/#!/index 
如果说是地址重写或者是restful风格为什么要用#!这么奇怪的地址呢？
以下内容截取自顾轶灵的回答:
URL 中的 # 本来的用途是跳转到页内锚点。一个 URL 中 # 后的值 (hash tag) 不影响所访问网页的内容，所以搜索引擎在处理仅仅 hash tag 不同的多个 URL 时会当做相同内容从而忽略 hash tag。

但近年来 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 前两年曾有过不错的合作，所以支持得比较早吧。

 
以下内容截取自阮一峰的网络日志《URL的井号》
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模式的更多相关文章

  1. ASP.NET Core的路由[1]：注册URL模式与HttpHandler的映射关系

    ASP.NET Core的路由是通过一个类型为RouterMiddleware的中间件来实现的.如果我们将最终处理HTTP请求的组件称为HttpHandler,那么RouterMiddleware中间 ...

  2. Django2.0路由层-URLconf

    目录 DJango2.0路由层-URLconf 概述 urlpatterns 实例 path转换器 自定义path转换器 使用正则表达式 命名组(有名分组) URLconf匹配请求URL中的哪些部分 ...

  3. ThinkPHP5.0框架开发--第4章 TP5.0路由

    ThinkPHP5.0框架开发--第4章 TP5.0路由 第4章 TP5.0 路由 ================================================== 上次复习 1. ...

  4. vue 2.0 路由切换以及组件缓存源代码重点难点分析

    摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...

  5. $Django 虚拟环境，2.0、1.0路由层区别,Httprequest对象,视图层(fbv,cbv),文件上传

    1 虚拟环境:解决问题同一台机器上可以运行不同版本的django,  1 用pychanrm创建--->files-->newproject--->选择虚拟环境  2 setting ...

  6. vue2.0路由

    现在用vue-cli搭建的环境里面vue-router是下载好的 vue2.0路由方式和以前也有些不同 没了了map和start方法 目录结构如上图 这里有三个文件,app.vue显示,main.js ...

  7. vue2.0路由写法、传参和嵌套

    前置知识请戳这里 vue-routerCDN地址:https://unpkg.com/vue-router@3.0.1/dist/vue-router.js vue-router下载地址:https: ...

  8. Django day05 虚拟环境 django 2.0和django 1.0 路由层区别

    一:虚拟环境 创建虚拟环境一般有三种方式: 1)   File--->New Project--> 出现如下图,点击Project Interpreter:New Virtualenv e ...

  9. OLE DB访问接口“MICROSOFT.JET.OLEDB.4.0”配置为在单线程单位模式下运行，所以该访问接口无法用于分布式

    OLE DB访问接口"MICROSOFT.JET.OLEDB.4.0"配置为在单线程单位模式下运行,所以该访问接口无法用于分布式 数据库操作excel时遇到的以上问题的解决方法 解 ...

随机推荐

  1. 使用python将ppm格式转换成jpg【转】

    转自:http://blog.csdn.net/hitbeauty/article/details/48465017 最近有个很火的文章,叫 有没有一段代码,让你觉得人类的智慧也可以璀璨无比? 自己试 ...

  2. why not ovp protection ?

    HW MSM8917 PM8937 PMI8940 Question : Recently, I connect usb cable with 10V to the phone. Why does t ...

  3. .NET下XML文件的读写

    一．前言: XML是微软.Net战略的一个重要组成部分,而且它可谓是XML Web服务的基石,所以掌握.Net框架下的XML技术自然显得非常重要了.本文将指导大家如何运用C#语言完成.Net框架下的X ...

  4. SVG描边动画实现过程

    准备工具:Adobe AI+PS 1.确定SVG画布的大小,在PS中切出需要描边效果的区域,以此区域的大小做为SVG容器的大小.   2.将PS中切好的图片直接拖拽到AI中     3.使用AI中的钢 ...

  5. redis--服务器与客户端

    初始化服务器 从启动 Redis 服务器,到服务器可以接受外来客户端的网络连接这段时间,Redis 需要执行一系列初始化操作. 整个初始化过程可以分为以下六个步骤: 初始化服务器全局状态. 载入配置文 ...

  6. If Value Exists Then Query Else Allow Create New in Oracle Forms An Example

    An example given below for Oracle Forms, when a value exists then execute query for that value to di ...

  7. 在dedecms后台发表文章显示外部连接栏目

    问题描述:客户的网站,有个顶级栏目,下面包含了几个子栏目,这个顶级栏目不想发布什么内容,点击后进入他的某个子栏目就可以了,这时候把这个顶级栏目设置为“外部连接”就可以了 但是设置顶级栏目为外部连接后, ...

  8. hdu 1541Stars

    题意:定义在某颗星星左下方的星星的个数表示该星星的水平,求出水平分别为为0...n-1的星星个数. 首先题目是按照y坐标升序输入的,设第第1,2...n个星星的横坐标依次为x1,x2,...xn.显然 ...

  9. 如何查看linux版本 如何查看LINUX是多少位

    一.如何得知自己正在使用的linux是什么版本呢,下面的几种方法将给你带来答案! 1. 查看内核版本命令: 1) [root@q1test01 ~]# cat /proc/version Linux ...

  10. Linux下ntp时间同步

    在root用户下执行 先安装同步时间软件,每台机器执行 yum install -y ntp 然后执行以下命令: crontab -e */10 * * * * /usr/sbin/ntpdate - ...