Angular SPA 中不需要的页面刷新答案

【问题标题】：Unwanted page refreshing in Angular SPAAngular SPA 中不需要的页面刷新
【发布时间】：2015-03-06 13:30:46
【问题描述】：

我有使用 HTML5 模式的 Angular 路由设置，如下所示：

app.config($routeProvider, $locationProvider){

  $locationProvider.html5Mode(true);

  $routeProvider.when("/", {
    templateUrl: "/views/login.html"
  }).when("/dashboard", {
    templateUrl: "/views/dashboard.html"
  })

});

现在我使用这样的简单链接在路线之间移动：

<a href="/dashboard"></a>

这很好用，只是当我单击链接时似乎重新加载了整个页面。 Angular 不打算这样做，所以我不确定发生了什么。

可能值得注意的是，实际上我的脚本比这要复杂得多，但是在调试了所有内容后，除了我最近切换到 HTML5 模式之外，我看不出有任何问题。

如何停止页面重新加载？

【问题讨论】：

在链接前添加#：<a href="#/dashboard"></a>
@devqon 我正在使用 HTML5 模式来摆脱散列。添加哈希也会影响我拥有的一些 SEO 模块。
我在 Angular 中使用 HTML5 模式在另一个 SPA 上的 SEO 工作得很好。只是不确定这里出了什么问题。
@devqon 该声明不正确。有很多方法可以使 SPA SEO 友好

标签： javascript html angularjs

【解决方案1】：

尝试使用ui-sref 指令。它将使用$state 服务来加载页面。

<a ui-sref="yourroute">Link</a>

您必须使用$stateProvider 配置您的路由才能使用路由名称。

【讨论】：

我一直将 href 与 Angular 链接一起使用。已经工作了很长时间。此外，刚刚尝试了ui-sref，结果更加糟糕。它甚至不再进入页面。

【解决方案2】：

如果您使用 Angular 路由，您的链接应以哈希开头，以防止浏览器导航离开页面。你试过了吗：

<a href="#/dashboard"></a>

【讨论】：