$ location 在html5和hashbang模式之间切换链接重写_随笔

$ location /在html5和hashbang模式之间切换/链接重写

该文档对AngularJS路由不是很清楚。它讨论了Hashbang和HTML5模式。实际上，AngularJS路由以三种模式运行：

Hashbang模式
HTML5模式
HTML5模式下的Hashbang

对于每种模式，都有各自的LocationUrl类（LocationHashbangUrl，LocationUrl和LocationHashbangInHTML5Url）。

为了模拟URL重写，您实际上必须将html5mode设置为true并装饰$ sniffer类，如下所示：

$provide.decorator('$sniffer', function($delegate) {  $delegate.history = false;  return $delegate;});

我现在将更详细地解释这一点：

Hashbang模式

组态：

$routeProvider  .when('/path', {    templateUrl: 'path.html',});$locationProvider  .html5Mode(false)  .hashPrefix('!');

当您需要在HTML文件（例如，

<a href="index.html#!/path">link</a>

在浏览器中，您必须使用以下链接：

http://www.example.com/base/index.html#!/base/path

如您所见，在纯Hashbang模式下，HTML文件中的所有链接都必须以诸如“ index.html＃！”之类的开头。

HTML5模式

组态：

$routeProvider  .when('/path', {    templateUrl: 'path.html',  });$locationProvider  .html5Mode(true);

您应该在HTML文件中设置基础

<html>  <head>    <base href="/">  </head></html>

在这种模式下，您可以使用HTML文件中不带＃号的链接

<a href="/path">link</a>

浏览器中的链接：

http://www.example.com/base/path

HTML5模式下的Hashbang

当我们实际使用HTML5模式但在不兼容的浏览器中时，会激活此模式。通过装饰$
sniffer服务并将历史记录设置为false，我们可以在兼容的浏览器中模拟此模式。

组态：

$provide.decorator('$sniffer', function($delegate) {  $delegate.history = false;  return $delegate;});$routeProvider  .when('/path', {    templateUrl: 'path.html',  });$locationProvider  .html5Mode(true)  .hashPrefix('!');

在HTML文件中设置基础：

<html>  <head>    <base href="/">  </head></html>

在这种情况下，也可以在HTML文件中不包含哈希的情况下编写链接

<a href="/path">link</a>

浏览器中的链接：

http://www.example.com/index.html#!/base/path

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/5641993.html

$ location 在html5和hashbang模式之间切换链接重写

发表评论

评论列表（0条）