然而,似乎没有重写正在发生。下面的例子不允许我只改变模式。应用程序中的所有链接都需要手动重写(或者在运行时从一个变量派生)我需要根据模式手动重写所有URL吗?
我在Angular 1.0.6,1.1.4或1.1.3中没有看到任何客户端url重写。看起来所有href值需要用#/用于hashbang模式和/对于html5模式。
是否有必要的配置导致重写?我错误地阅读文档吗?做别的傻事吗?
这里有一个小例子:
<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代码中跨两种模式统一解释路径。它不是关于如何使一个web服务器做兼容HTML5的重写请求。
>哈希模式
> HTML5模式
> Hashbang在HTML5模式
对于每个模式,有一个相应的LocationUrl类(LocationHashbangUrl,LocationUrl和LocationHashbangInHTML5Url)。
为了模拟URL重写,你必须实际设置html5mode为true,并装饰$ sniffer类如下:
$provide.decorator('$sniffer',function($delegate) { $delegate.history = false; return $delegate; });
我现在将更详细地解释这一点:
哈希模式
组态:
$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',}); $locationProvider .html5Mode(true);
你应该在HTML文件中设置基数
<html> <head> <base href="/"> </head> </html>
<a href="/path">link</a>
浏览器中的链接:
http://www.example.com/base/path
Hashbang在HTML5模式
当我们实际使用HTML5模式但在不兼容的浏览器中时,此模式被激活。我们可以通过装饰$ sniffer服务并将历史设置为false来在兼容的浏览器中模拟此模式。
组态:
$provide.decorator('$sniffer',function($delegate) { $delegate.history = false; return $delegate; }); $routeProvider .when('/path',}); $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