使用html5mode与在非root网址导航AngularJS [英] Using html5mode for navigating with AngularJS at non-root URL

问题描述

我想使用AngularJS的HTML 5的位置模式与居住在非根URL的应用程序。不幸的是，我每次点击一个链接时，浏览器做一个完整的页面导航。

I am trying to use AngularJS's HTML 5 location mode with an app that lives at a non-root URL. Unfortunately, every time I click a link, the browser does a full page navigation.

下面是我的设置：

• 角JS V1.2.2


• 使用ASP.NET MVC后端


• 根页托管在/ MyApp的


• 页有＆LT;基本href =/ MyApp的//＆GT; 在头部分设置


• $ locationProvider.html5Mode（真）; 应用程序的配置过程中运行


• 服务器设置返回索引页面超出/ MyApp的/
所有链接

• 使用HTML 5兼容的浏览器（火狐，Chrome）

• Angular JS v1.2.2
• Using ASP.NET MVC for back-end
• Root page hosted at /myapp
• Page has <base href="/myapp/" /> set in head section
• $locationProvider.html5Mode(true); run during the app's config
• The server is set to return the index page for all links beyond /myapp/
• Using HTML 5 compatible browsers (Firefox, Chrome)

我的路由配置如下：

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

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

When the initial page loads at /myapp, the dashboard view is loaded and the URL in the navigation bar is changed to /myapp/, which seems correct.

不幸的是，当我点击一个链接，如＆LT; A HREF =/ MyApp的/功能'＆GT;特征＆LT; / A＆GT; 浏览器发出一个完整的页面请求到 / MyApp的/功能。我以为角度应该拦截的链接，只是加载相应的意见。

Unfortunately, when I click a link such as <a href='/myapp/feature'>Feature</a> the browser makes a full page request to /myapp/feature. I thought Angular was supposed to intercept the links and just load the appropriate views.

我如何prevent完整的页面重载，而使用HTML 5模式，在非根URL应用？

How do I prevent the full page reload while using HTML 5 mode with the application in the non-root URL?

感谢

推荐答案

答案竟然是有趣。我有NG-应用程序上面我NG-认为，这是太远的一个元素。应用程序的HTML元素解决了我的问题。

The answer turned out to be interesting. I had the ng-app applied one element above my ng-view, which was too far down. Applying the app to the html element solved my problems.

这篇关于使用html5mode与在非root网址导航AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！