栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

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

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

$ 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


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/636133.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号