We are using AngularJS version 1.3.16 and nodeJS as backend, ng-route for angular routing. Working code consists of #! as URL separator for node and angular.
Example URLs: /store/1234/#!/department/produce /store/1234/#!/department/produce/category/fruits
NodeJS Routing code:
app.get('/store/:storeid', ctrl.storeView);
Angular routing code:
$routeProvider.when('/department/:deptIndex', {
controller: 'CartController',
resolve: {
// I will cause a 1 second delay
delay: function ($q, $timeout) {
var delay = $q.defer();
$timeout(delay.resolve, 1000);
return delay.promise;
}
}
}).when('/department/:deptIndex/category/:catIndex', {
controller: 'CartController',
resolve: {
// I will cause a 1 second delay
delay: function ($q, $timeout) {
var delay = $q.defer();
$timeout(delay.resolve, 1000);
return delay.promise;
}
}
});
$locationProvider.html5Mode(false).hashPrefix('!');
To make the URLs SEO friendly and crawlable we have to remove the hashbang from URL. So, the issue arises when we are trying to enable the html5 mode. The angular routing is not working after the mode is enabled.
My routing started working once I updated my base href as node server url:
<head>
<base href='/store/'+store.storeCode>
</head>
Also I updated my angular routings urls prefixed with Store Code like:
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.when('/:storeid/department/:deptIndex', {
//my routing code
});