$位置/ HTML5和hashbang模式之间的转换/重写链接 [英] $location / switching between html5 and hashbang mode / link rewriting
问题描述
我是IM pression根据该角度将重写出现在tempaltes内锚标签的href属性，网址，这样，他们将工作无论是在HTML5模式或hashbang模式。对于位置服务的 文件似乎是说，HTML链接重写需要的hashbang情况关怀。因此，我预计在不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?
我看不到任何客户端的URL重写角1.0.6，1.1.4或1.1.3事情。似乎所有的href值需要用/以＃ppended $ P $的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>
附录：在重新阅读我的问题，我看到，我用了重写没有丰富的清晰度是谁，当我想做的重写。现在的问题是如何取得的角重写URL时它呈现的路径，以及如何得到它在跨preT路径的JS code均匀分布在两种模式。它的不可以有关如何使Web服务器做请求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模式
- Hashbang在HTML5模式
对于每种模式有一个相应的LocationUrl类（LocationHashbangUrl，LocationUrl和LocationHashbangInHTML5Url）。
For each mode there is a a respective LocationUrl class (LocationHashbangUrl, LocationUrl and LocationHashbangInHTML5Url).
为了模拟URL重写必须实际设置html5mode为true，装饰$嗅探器类，如下所示：
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('!');
这是当你需要使用带有哈希的URL在你的HTML文件，如在案件
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>
Link在浏览器：
Link in Browser:
http://www.example.com/base/path
Hashbang在HTML5模式
当我们实际使用HTML5模式，但在不兼容的浏览器，此模式被激活。我们可以通过装饰$嗅探服务并设置历史为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>
Link在浏览器：
Link in Browser:
http://www.example.com/index.html#!/base/path
这篇关于$位置/ HTML5和hashbang模式之间的转换/重写链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
