Using html5mode for navigating with AngularJS at non-root URL

Question

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

Brian Vallelunga · Accepted Answer · 2014-01-13 19:01:04Z

0

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.

answered Jan 13, 2014 at 19:01

Brian Vallelunga

10.2k16 gold badges65 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using html5mode for navigating with AngularJS at non-root URL

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related