使用 html5mode 在非根 URL 上使用 AngularJS 进行导航

Question

我正在尝试将 AngularJS 的 HTML 5 位置模式与位于非根 URL 的应用程序一起使用。不幸的是，每次我点击一个链接时，浏览器都会进行整页导航。

这是我的设置：

• Angular JS v1.2.2
• 使用 ASP.NET MVC 作为后端
• 托管在 /myapp 的根页面
• 页面在头部设置了<base href="/myapp/" />
• $locationProvider.html5Mode(true); 在应用配置期间运行
• 服务器设置为返回 /myapp/ 之外的所有链接的索引页
• 使用与 HTML 5 兼容的浏览器（Firefox、Chrome）

我的路由配置如下：

$routeProvider
    .when("/", {
        templateUrl: "/App/dashboard/dashboard.html",
        controller: "DashboardController"
    })
    .when("/feature", {
        templateUrl: "/App/feature/feature.html",
        controller: "FeatureController"
    });

当初始页面在 /myapp 加载时，仪表板视图被加载并且导航栏中的 URL 更改为 /myapp/，这似乎是正确的。

不幸的是，当我单击<a href='/myapp/feature'>Feature</a> 之类的链接时，浏览器会向/myapp/feature 发出整页请求。我认为 Angular 应该拦截链接并加载适当的视图。

在非根 URL 中的应用程序中使用 HTML 5 模式时如何防止整个页面重新加载？

谢谢

Answer 1

结果很有趣。我让 ng-app 在我的 ng-view 上方应用了一个元素，该元素太低了。将应用程序应用于 html 元素解决了我的问题。