Search code examples
angularjsnode.jsroutesngroutehtml5mode

angularjs 1.3.16 routing with html5mode, url is updating but content not updating

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.

Solution

  • 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
});