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

Issue

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

Answered By – Lakshmi Manasa Pandiri

Answer Checked By – Mary Flores (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.