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.

really? I'm on 1.1.5 , tried with the code [:userId] and doesn't ignore them. — Alexandru R, Jul 07 '13 at 10:01
try without `[]`. See this commit: https://github.com/angular/angular.js/commit/53061363c7aa1ab9085273d269c6f04ac2162336 — OZ_, Jul 07 '13 at 10:04
oops, sorry, it's about $resource, not sure if it will work in routing. excuse me. — OZ_, Jul 07 '13 at 10:14
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? — AlexStack, Oct 29 '14 at 08:15

score 244 · Accepted Answer · edited Feb 20 '18 at 20:02

244

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?)

edited Feb 20 '18 at 20:02

Armin

15,582
10
47
64

answered Oct 07 '13 at 12:20

g-eorge

3,326
2
16
10

7

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. – James Bell Nov 21 '14 at 20:40
1

Would like to know if anyone has a solution for the problem reported by @JamesBell – Leiko Feb 04 '15 at 17:03
5

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. – Judah Gabriel Himango Feb 25 '15 at 16:55
1

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. – ruby_newbie Apr 13 '15 at 22:06
Documentation is confusing. – Oliver Dixon Dec 07 '15 at 20:25

score 60 · Answer 2 · edited Jul 08 '15 at 18:01

60

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.

edited Jul 08 '15 at 18:01

uncaught_exceptions

21,712
4
41
48

answered Dec 22 '13 at 18:49

zmilan

1,142
17
19

score 8 · Answer 3 · edited May 23 '17 at 12:10

Please see @jlareau answer here: https://stackoverflow.com/questions/11534710/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:'/'});
    }
);

score 2 · Answer 4 · answered Jul 07 '13 at 21:23

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.

Can angularjs routes have optional parameter values?

4 Answers4

Linked