Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS $routeProvider is there a shorthand way of having multiple routes with same settings?

Tags:

angularjs

I have both routes leading to the same view and controller (i.e. I'm just passing in an id to access in $routeParams and performing controller logic on it):

$routeProvider
        .when('/about',
        {
            controller: 'AboutController',
            controllerAs: 'vm',
            templateUrl: 'about.html'
        })
        .when('/about/:id',
        {
            controller: 'AboutController',
            controllerAs: 'vm',
            templateUrl: 'about.html'
        });

This feels very repetitive. Is there any shorthand, something like this?

$routeProvider
            .when(['/about', '/about/:id'],
            {
                controller: 'AboutController',
                controllerAs: 'vm',
                templateUrl: 'about.html'
            })
like image 995
PDN Avatar asked Apr 27 '16 03:04

PDN


People also ask

What is provider explain use of $routeProvider in AngularJS?

The $routeProvider is configured with the help of calls to the when() and otherwise() functions. when() function takes route path and a JavaScript object as parameters. otherwise() takes a JavaScript object as parameters. Syntax to configure the routes in AngularJS: var app = angular.

Which module is required to configure route details in an AngularJS application?

AngularJS ngRoute module provides routing, deep linking services and directives for angular applications. We have to download angular-route. js script that contains the ngRoute module from AngularJS official website to use the routing feature. You can also use the CDN in your application to include this file.

How do we set a default route in $routeProvider?

Creating a Default Route in AngularJS The below syntax just simply means to redirect to a different page if any of the existing routes don't match. otherwise ({ redirectTo: 'page' }); Let's use the same example above and add a default route to our $routeProvider service. function($routeProvider){ $routeProvider.

Which directive is used to define links to different routes in the template files?

To add links to one of the routes, use the routerLink directive in HTML. This directive accepts an array.


1 Answers

From $routeProvider source code, it seems to me that it is not possible. this.when method accepts two parameters, path and route. For multiple path, this.when should either accept array of path as parameter, or extract multiple paths from single string. I don't see any of these two in this method.

this.when = function(path, route) {
    //copy original route object to preserve params inherited from proto chain
    var routeCopy = angular.copy(route);
    if (angular.isUndefined(routeCopy.reloadOnSearch)) {
      routeCopy.reloadOnSearch = true;
    }
    if (angular.isUndefined(routeCopy.caseInsensitiveMatch)) {
      routeCopy.caseInsensitiveMatch = this.caseInsensitiveMatch;
    }
    routes[path] = angular.extend(
      routeCopy,
      path && pathRegExp(path, routeCopy)
    );

    // 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, routeCopy)
      );
    }

    return this;
  };
like image 124
Khalid Hussain Avatar answered Sep 21 '22 03:09

Khalid Hussain