angularjs – $ location /在html5和hashbang模式/链接重写之间
|
我的印象是，Angular将重写在临时标记中的锚标签的href属性中出现的URL，这样它们将在html5模式或散列模式下工作。
documentation for the location service似乎说HTML链接重写照顾哈勃的情况。因此，我希望，当不是在HTML5模式，哈希值将被插入，而在HTML5模式，他们不会。
然而，似乎没有重写正在发生。下面的例子不允许我只改变模式。应用程序中的所有链接都需要手动重写(或者在运行时从一个变量派生)我需要根据模式手动重写所有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的重写请求。
文档不是很清楚AngularJS路由。它谈到Hashbang和HTML5模式。事实上，AngularJS路由操作有三种模式：
>哈希模式 对于每个模式，有一个相应的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>
在此模式下，您可以使用不带#的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 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |