Can angularjs routes have optional parameter values?

Question

Can I set a route with optional params (same template and controller, but some params should be ignored if they don't exist?

So instead of writing the following two rules, have only one?

module.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
     when('/users/', {templateUrl: 'template.tpl.html', controller: myCtrl}).            
     when('/users/:userId', {templateUrl: 'template.tpl.html', controller: myCtrl})
}]);

Something like this ([this param is optional])

when('/users[/:userId]', {templateUrl: 'template.tpl.html', controller: myCtrl})
//note: this previous doesn't work

I couldn't find anything in their documentation.

Analcite

they will be ignored (without []) in 1.1.5 version. – Blandishment

really? I'm on 1.1.5 , tried with the code [:userId] and doesn't ignore them. – Analcite

try without []. See this commit: github.com/angular/angular.js/commit/… – Blandishment

oops, sorry, it's about $resource, not sure if it will work in routing. excuse me. – Blandishment

If g-orge's answer is good, would you please mark it so that people don't have to scroll the whole thing to find the best answer? – Minh

Answer 1

It looks like Angular has support for this now.

From the latest (v1.2.0) docs for $routeProvider.when(path, route):

path can contain optional named groups with a question mark (:name?)

Microampere

Any way to avoid using the trailing slash? If my route is: .when('/claims/documents/:CLAIMS_ID/:DOCUMENT_NAME?'... it won't match if the url doesn't have a trailing slash. So /claims/documents/1234/ matches, but /claims/documents/1234 doesn't. – Andrel

Would like to know if anyone has a solution for the problem reported by @JamesBell – Fideism

As of Angular 1.3, the trailing slash issue mentioned in the above comments is fixed. Navigating to /claims/documents/1234/ works correctly, as does /claims/documents/1234. In short, it works with or without the trailing slash. – Socio

I am still seeing this behavior if I have an optional parameter in my route. For example: if the route is: '/:classification?/package/compare' and I try to navigate to the url "/package/compare" it works. If I try '/package/compare/' for some reason I get the asci code appended to the classification, or '/%3f/package/compare' which isn't an actual route. – Burnie

Documentation is confusing. – Weald

Answer 2

Like @g-eorge mention, you can make it like this:

module.config(['$routeProvider', function($routeProvider) {
$routeProvider.
  when('/users/:userId?', {templateUrl: 'template.tpl.html', controller: myCtrl})
}]);

You can also make as much as u need optional parameters.

Preoccupancy

Answer 3

Please see @jlareau answer here: https://mcmap.net/q/145202/-angularjs-how-to-use-routeparams-in-generating-the-templateurl

You can use a function to generate the template string:

var app = angular.module('app',[]);

app.config(
    function($routeProvider) {
        $routeProvider.
            when('/', {templateUrl:'/home'}).
            when('/users/:user_id', 
                {   
                    controller:UserView, 
                    templateUrl: function(params){ return '/users/view/' + params.user_id;   }
                }
            ).
            otherwise({redirectTo:'/'});
    }
);

Grotius

Answer 4

Actually I think OZ_ may be somewhat correct.

If you have the route '/users/:userId' and navigate to '/users/' (note the trailing /), $routeParams in your controller should be an object containing userId: "" in 1.1.5. So no the paramater userId isn't completely ignored, but I think it's the best you're going to get.

Expenditure