AngularJS应用程序在锚标记中链接/路由与HTML5模式

Question

如何链接到锚A标记中的其他AngularJS应用程序位置？我正在使用HTML5无散列模式,并希望避免让页面实际重新加载.

例如,在非HTML5模式下,我会这样做:

<a href='#/path'>Link</a>

在HTML5模式下,我可以这样做:

<a href='/path'>Link</a>

但这实际上会导致浏览器重新加载新的URL.我也试过使用ng-href和/#/path语法,但它们似乎都没有像我想的那样工作.

如何从锚标签正确链接？

Answer 1

更新:

看来这可能不使用$ location,你只需要保持相同的基本链接.来自文档:

当您使用HTML5历史记录API模式时,您将需要在不同浏览器中使用不同的链接,但您只需指定常规URL链接,例如:<a href="/some?foo=bar">链接</a>

当用户点击此链接时

• 在旧版浏览器中,URL更改为/index.html#!/some?foo=bar
• 在现代浏览器中,URL更改为/ some？foo = bar

在如下情况下,链接不会被重写; 相反,浏览器将执行整页重新加载到原始链接.

• 包含目标元素的链接.示例:<a href="/ext/link?a=b" target="_self">链接</a>
• 转到其他域的绝对链接.示例:<a href="http://angularjs.org/"> </a>
• 以'/'开头的链接,在定义base时会导致不同的基本路径.示例:<a href="/not-my-base/link">链接</a>

旧:

您应该使用$ location服务.将其注入控制器并将其放在$ scope(或方便的方法)中:

function MainCtrl($scope,$location){
  $scope.goto = function(path){
    $location.path(path);
  }
}

<a ng-click="goto('/path')">Link</a>