$location/在 html5 和 hashbang 模式之间切换/链接重写 [英] $location / switching between html5 and hashbang mode / link rewriting
问题描述
我的印象是 Angular 会重写出现在模板内锚标记的 href 属性中的 URL，这样它们就可以在 html5 模式或 hashbang 模式下工作.定位服务文档 似乎说 HTML 链接重写负责哈希邦的情况.因此，我希望当不在 HTML5 模式下时，会插入哈希值，而在 HTML5 模式下，则不会.
I was under the impression that Angular would rewrite URLs that appear in href attributes of anchor tags within tempaltes, such that they would work whether in html5 mode or hashbang mode. The documentation for the location service seems to say that HTML Link Rewriting takes care of the hashbang situation. I would thus expect that when not in HTML5 mode, hashes would be inserted, and in HTML5 mode, they would not.
但是，似乎没有进行重写.以下示例不允许我只更改模式.应用程序中的所有链接都需要手动重写(或在运行时从变量派生.我是否需要根据模式手动重写所有 URL?
However, it seems that no rewriting is taking place. The following example does not allow me to just change the mode. All links in the application would need to be rewritten by hand (or derived from a variable at runtime. Am I required to manually rewrite all URLs depending on the mode?
我在 Angular 1.0.6、1.1.4 或 1.1.3 中没有看到任何客户端 url 重写.似乎所有的 href 值都需要在 hashbang 模式和/为 html5 模式前加上 #/.
I don't see any client-side url rewriting going on in Angular 1.0.6, 1.1.4 or 1.1.3. It seems that all href values need to be prepended with #/ for hashbang mode and / for html5 mode.
是否需要一些配置来导致重写?我误读了文档吗?干点别的傻事?
Is there some configuration necessary to cause rewriting? Am I misreading the docs? Doing something else silly?
这是一个小例子:
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.3/angular.js"></script>
</head>
<body>
<div ng-view></div>
<script>
angular.module('sample', [])
.config(
['$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
//commenting out this line (switching to hashbang mode) breaks the app
//-- unless # is added to the templates
$locationProvider.html5Mode(true);
$routeProvider.when('/', {
template: 'this is home. go to <a href="/about"/>about</a>'
});
$routeProvider.when('/about', {
template: 'this is about. go to <a href="/"/>home</a'
});
}
])
.run();
</script>
</body>
附录:在重新阅读我的问题时，我发现我使用了重写"这个词，但并没有明确说明我想要重写的对象和时间.问题是如何让 Angular 在呈现路径时重写 URL，以及如何让它在两种模式下统一解释 JS 代码中的路径.它不是关于如何使网络服务器对请求进行与 HTML5 兼容的重写.
Addendum: in re-reading my question, I see that I used the term "rewriting" without an abundance of clarity as to who and when I wanted to do the rewriting. The question is about how to get Angular to rewrite the URLs when it renders paths and how to get it to interpret paths in the JS code uniformly across the two modes. It is not about how to cause a web server to do HTML5-compatible rewriting of requests.
推荐答案
文档对 AngularJS 路由不是很清楚.它讨论了 Hashbang 和 HTML5 模式.实际上，AngularJS 路由以三种模式运行:
The documentation is not very clear about AngularJS routing. It talks about Hashbang and HTML5 mode. In fact, AngularJS routing operates in three modes:
- Hashbang 模式
- HTML5 模式
- HTML5 模式下的 Hashbang
对于每种模式，都有一个各自的 LocationUrl 类(LocationHashbangUrl、LocationUrl 和 LocationHashbangInHTML5Url).
For each mode there is a a respective LocationUrl class (LocationHashbangUrl, LocationUrl and LocationHashbangInHTML5Url).
为了模拟 URL 重写，您必须实际将 html5mode 设置为 true 并按如下方式装饰 $sniffer 类:
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:
配置:
$routeProvider
.when('/path', {
templateUrl: 'path.html',
});
$locationProvider
.html5Mode(false)
.hashPrefix('!');
当您需要在 HTML 文件中使用带有哈希值的 URL 时就是这种情况，例如
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>
在浏览器中，您必须使用以下链接:http://www.example.com/base/index.html#!/base/path
In the Browser you must use the following Link: http://www.example.com/base/index.html#!/base/path
正如您在纯 Hashbang 模式中所见，HTML 文件中的所有链接都必须以index.html#!"等基数开头.
As you can see in pure Hashbang mode all links in the HTML files must begin with the base such as "index.html#!".
配置:
$routeProvider
.when('/path', {
templateUrl: 'path.html',
});
$locationProvider
.html5Mode(true);
您应该在 HTML 文件中设置基础
You should set the base in HTML-file
<html>
<head>
<base href="/">
</head>
</html>
在这种模式下，您可以在 HTML 文件中使用不带 # 的链接
In this mode you can use links without the # in HTML files
<a href="/path">link</a>
浏览器中的链接:
http://www.example.com/base/path
HTML5 模式下的 Hashbang
当我们实际使用 HTML5 模式但在不兼容的浏览器中时会激活此模式.我们可以通过修饰 $sniffer 服务并将 history 设置为 false 来在兼容的浏览器中模拟这种模式.
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.
配置:
$provide.decorator('$sniffer', function($delegate) {
$delegate.history = false;
return $delegate;
});
$routeProvider
.when('/path', {
templateUrl: 'path.html',
});
$locationProvider
.html5Mode(true)
.hashPrefix('!');
在 HTML 文件中设置基础:
Set the base in HTML-file:
<html>
<head>
<base href="/">
</head>
</html>
在这种情况下，链接也可以在 HTML 文件中不带哈希值的情况下写入
In this case the links can also be written without the hash in the HTML file
<a href="/path">link</a>
浏览器中的链接:
http://www.example.com/index.html#!/base/path
这篇关于$location/在 html5 和 hashbang 模式之间切换/链接重写的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
