Using html5mode for navigating with AngularJS at n

问题:

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.