skip to Main Content

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


  1. Chosen as BEST ANSWER

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

  2. Each route should have a template or a template URL , and your HTML should have ng-view to see the route content

    Login or Signup to reply.
  3. Have you set the base url in your index.html?

    <head>
      <base href="/">
    </head>
    

    You will also need to set html5mode to true and remove hashPrefix

    $locationProvider.html5Mode(true);
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search