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.
3
Answers
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:
Each route should have a template or a template URL , and your HTML should have ng-view to see the route content
Have you set the base url in your index.html?
You will also need to set html5mode to true and remove hashPrefix