angularjs routing for multiple routings

Question

I have a quick question about the AngularJS routing. As we know that we can do the routing as follows:

$routeProvider
        .when('/dashboard', {
            templateUrl : 'dashboard.htm',
            title       : 'Dashboard'
        })
        .when('/settings', {
            templateUrl : 'settings.htm',
            title       : 'Settings'
        })
        .otherwise({
            templateUrl : 'error-page.htm',
            title       : 'Page Not Found'
        });

Here I need to do multiple rouging for the single templateURL, I wanted to to something like shown below:

  $routeProvider
        .when('/dashboard || /', { /* Here doing OR for "/dashboard" and "/" */
            templateUrl : 'dashboard.htm',
            title       : 'Dashboard'
        })
        .when('/settings', {
            templateUrl : 'settings.htm',
            title       : 'Settings'
        })
        .otherwise({
            templateUrl : 'error-page.htm',
            title       : 'Page Not Found'
        });

Is there any way to do that in AngularJS routing? I do not want to make one more .when for the second part.

marneborn · Accepted Answer · 2014-09-19 03:20:00Z

I think this will work:

  $routeProvider
        .when('/', {
            redirectTo : '/dashboard'
        })
        .when('/dashboard', {
            templateUrl : 'dashboard.htm',
            title       : 'Dashboard'
        })
        .when('/settings', {
            templateUrl : 'settings.htm',
            title       : 'Settings'
        })
        .otherwise({
            templateUrl : 'error-page.htm',
            title       : 'Page Not Found'
        });

EDIT To add source code. From angular-route.js the pathName is simply used to lookup in a table, so you can't do an or.

  this.when = function(path, route) {

    routes[path] = angular.extend(
      {reloadOnSearch: true},
      route,
      path && pathRegExp(path, route)
    );
    // create redirection for trailing slashes
    if (path) {
      var redirectPath = (path[path.length-1] == '/')
            ? path.substr(0, path.length-1)
            : path +'/';
      routes[redirectPath] = angular.extend(
        {redirectTo: path},
        pathRegExp(redirectPath, route)
      );
    }
    return this;
  };

You could fork angular and do something like this:

this.when = function(paths, route) {
    if ( !angular.isArray(paths) )
        paths = [path];

    for (var i=0; i<paths; i++ ) {
        var path = paths[i];
        routes[path] = angular.extend(
          {reloadOnSearch: true},
          route,
          path && pathRegExp(path, route)
        );
        // create redirection for trailing slashes
        if (path) {
            var redirectPath = (path[path.length-1] == '/')
                ? path.substr(0, path.length-1)
                : path +'/';
            routes[redirectPath] = angular.extend(
                {redirectTo: path},
                pathRegExp(redirectPath, route)
            );
        }
    }
    return this;
};

Then you could then do :

  $routeProvider
        .when(['/dashboard', '/'], {
            templateUrl : 'dashboard.htm',
            title       : 'Dashboard'
        })

This looks same as my code. I do not want to make "two" .when() methods as both shares the same templates. I was looking to do something like "OR-ing" in a single .when() call, like I showed in my example above. If I can not do that in AngularJS, then I will go with your solution. Any idea about NOT having "two" .when() calls?

Subash Selvaraj · Accepted Answer · 2014-09-18 16:49:53Z

1

You can make dynamic routers like below.

 $routeProvider
            .when('/:page', {
                templateUrl : function($routeParams){
                   return $routeParams.page+".html";
                }
            })
            .otherwise({
                templateUrl : 'error-page.htm'
            });

answered Sep 18, 2014 at 16:49

Subash Selvaraj

3,3871 gold badge16 silver badges17 bronze badges

1 Comment

Hristo Enev Over a year ago

+1 - something new I learned, but I don't think it answers the question :)

ZF007 · Accepted Answer · 2018-03-05 13:12:45Z

0

For multiple routing use state router instead of ng router. if you want to do multiple routing this is the example.

// Define a top-level state:
$stateProvider.state('users', {
  url: '/users',
  templateUrl: 'views/users.html'
});

// Define a child state for 'users':
$stateProvider.state('users.new', {
  url: '/new',
  templateUrl: 'views/users.new.html'
});

edited Mar 5, 2018 at 13:12

ZF007

3,7419 gold badges33 silver badges52 bronze badges

answered Mar 5, 2018 at 11:55

Subodh Gawade

91 bronze badge

Collectives™ on Stack Overflow

angularjs routing for multiple routings

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related