Using html5mode to navigate using AngularJS to a non-root URL

Question

I am trying to use AngularJS HTML 5 location mode with an application that lives with a non-root url. Unfortunately, every time I click the link, the browser performs full page navigation.

Here is my setup:

• Angular JS v1.2.2
• Using ASP.NET MVC for back-end
• Root page hosted in / myapp
• The page <base href="/myapp/" /> set in the header section
• $locationProvider.html5Mode(true); runs during application setup
• The server is configured to return an index page for all links outside of / myapp /
• Using compatible HTML 5 browsers (Firefox, Chrome)

My routing configuration looks like this:

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

When the start page loads in / myapp, the contents of the dashboard loads, and the URL in the navigation bar changes to / myapp /, which seems to be correct.

Unfortunately, when I click on a link, for example, <a href='/myapp/feature'>Feature</a> , the browser makes a full request for the page /myapp/feature . I thought Angular should hook the links and just load the appropriate views.

How to prevent a full page reload when using HTML 5 mode with the app in an unauthorized URL?

thanks

Answer 1

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