我的印象是Angular会重写在tempaltes中的锚标记的href属性中出现的URL,这样无论是在html5模式还是hashbang模式下它们都能正常工作.位置服务的文档似乎说HTML链接重写处理了hashbang情况.因此,我希望在不在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-1.0.7和Bootstrap.最近我从AngularJs-1.0.7迁移到AngularJs-1.2.我正在使用Bootstrap的Accordions和Tabs.
Tab的Html代码<a href="#id_for_content">如下所示.
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#firstTab" data-toggle="tab">Home</a></li>
<li><a href="#secondTab" data-toggle="tab">Profile</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="firstTab">
<p>Content for first tab.</p>
</div>
<div class="tab-pane fade" id="secondTab">
<p>Content For second tab.</p>
</div>
</div>
在Angular的旧版本中,路由更改只有在我们给出锚标记时才会发生<a href="#/firstTab">.但AngularJs-1.2重定向<a href="#firstTab">.它不考虑/介于#和之间firstTab.因此,当点击Tab时,它会重定向到http://web_url/#/firstTab.如何解决这个问题？
我找到了解决这个问题的方法.我为标签写了一个指令.在该指令中,我检查了href属性.如果匹配阻止其默认行为.请检查以下代码.
app.directive('a', function() {
return {
restrict: 'E',
link: function(scope, elem, attrs) {
if(attrs.href === '#firstTab'|| attrs.href === '#secondTab'){
elem.on('click', function(e){
e.preventDefault();
}); …