AngularJS: how to enable $locationProvider.html5Mode with deeplinking
AngularjsAngularjs Problem Overview
When enabling the html5Mode in AngularJS via $locationProvider.html5Mode(true), navigation seems to be skewed when you land on a page deeper in the site.
for example:
-
http://www.site.com
when i navigate to the root, i can click all links in the site, Angular's$routeProviderwill take over navigating through the site and loading the correct views. -
http://www.site.com/news/archive
but when i navigate to this url (or hit refresh when I'm on a deeplink like the above one...) this navigation is not working as I expect it to. first of all, our as the Documentation for $locationProvider.html5Mode specifies, we catch all urls on the server, similar to theotherwiseroute in angular, and return the same html as the root domain. But if I then check the$locationobject from within therunfunction of angular, it tells me thathttp://www.site.comis myhostand that/archiveis mypath. the$routeProviderarrives in the.otherwise()clause, since i only have/news/archiveas a valid route. and the app does weird stuff.
Maybe the rewriting on the server needs to be done differently, or I need to specify stuff in angular, but currently i'm clueless as to why angular see's the path without the /news segment included.
example main.js:
// Create an application module
var App = angular.module('App', []);
App.config(['$routeProvider', '$locationProvider', function AppConfig($routeProvider, $locationProvider) {
$routeProvider
.when(
'/', {
redirectTo: '/home'
})
.when('/home', {
templateUrl: 'templates/home.html'
})
.when('/login', {
templateUrl: 'templates/login.html'
})
.when('/news', {
templateUrl: 'templates/news.html'
})
.when('/news/archive', {
templateUrl: 'templates/newsarchive.html'
})
// removed other routes ... *snip
.otherwise({
redirectTo: '/home'
}
);
// enable html5Mode for pushstate ('#'-less URLs)
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
}]);
// Initialize the application
App.run(['$location', function AppRun($location) {
debugger; // -->> here i debug the $location object to see what angular see's as URL
}]);
Edit
as per request, more details on the server side:
the server side is organised by the routing of zend framework, and it handles it's own routes (for serving data to the frontend on specific /api urls, and at the end, there is a catch-all route if no specific other route is bound, it serves the same html as the root-route.
so it basically serves the homepage html on that deeplinked route.
Update 2 after looking into the problem we noticed this routing works fine as it is, on Angular 1.0.7 stable, but shows the above described behaviour in the Angular 1.1.5 unstable.
I've checked the change-logs but haven't found anything useful so far, I guess we can either submit it as a bug, or unwanted behaviour linked to a certain change they did, or just wait and see if it get's fixed in the later to be released stable version.
Angularjs Solutions
Solution 1 - Angularjs
Found out that there's no bug there. Just add:
<base href="/" />
to your <head />.
Solution 2 - Angularjs
This was the best solution I found after more time than I care to admit. Basically, add target="_self" to each link that you need to insure a page reload.
http://blog.panjiesw.com/posts/2013/09/angularjs-normal-links-with-html5mode/
Solution 3 - Angularjs
This problem was due to the use of AngularJS 1.1.5 (which was unstable, and obviously had some bug or different implementation of the routing than it was in 1.0.7)
turning it back to 1.0.7 solved the problem instantly.
have tried the 1.2.0rc1 version, but have not finished testing as I had to rewrite some of the router functionality since they took it out of the core.
anyway, this problem is fixed when using AngularJS vs 1.0.7.
Solution 4 - Angularjs
- Configure AngularJS
- Configure your server:
Solution 5 - Angularjs
My problem solved with these :
1- Add this to your head :
<base href="/" />
2- Use this in app.config
$locationProvider.html5Mode(true);