Using html5mode for navigating with AngularJS at non-root 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.

Here's my setup:

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)

My routing configuration looks like:

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

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.

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.

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

Thanks

回答1:

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.

来源：https://stackoverflow.com/questions/21095835/using-html5mode-for-navigating-with-angularjs-at-non-root-url

标签

html5

angularjs

routes