CODEWITHSUNDEEP
angularjsroutes
jeewan
jeewan

Reputation: 1605

angularjs routing for multiple routings

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.

Upvotes: 1

Views: 144

Answers (3)

Subodh Gawade
Subodh Gawade

Reputation: 9

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

Upvotes: 0

marneborn
marneborn

Reputation: 699

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

Upvotes: 2

Subash Selvaraj
Subash Selvaraj

Reputation: 3385

You can make dynamic routers like below.

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

Upvotes: 1

Related Questions