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
– Alexandru R, Commented Jul 7, 2013 at 10:01
try without []. See this commit: github.com/angular/angular.js/commit/… — user680786
– user680786, Commented Jul 7, 2013 at 10:04
oops, sorry, it's about $resource, not sure if it will work in routing. excuse me. — user680786
– user680786, Commented Jul 7, 2013 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
– AlexStack, Commented Oct 29, 2014 at 8:15

Armin · Accepted Answer · 2018-02-20 20:02:45Z

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, 2018 at 20:02

Armin

16k10 gold badges50 silver badges66 bronze badges

answered Oct 7, 2013 at 12:20

g-eorge

3,3462 gold badges18 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

James Bell Over a year ago

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.

Leiko Over a year ago

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

Judah Gabriel Himango Over a year ago

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.

ruby_newbie Over a year ago

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.

Oliver Dixon Over a year ago

Documentation is confusing.

billygoat · Accepted Answer · 2015-07-08 18:01:57Z

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 8, 2015 at 18:01

billygoat

22.1k5 gold badges43 silver badges50 bronze badges

answered Dec 22, 2013 at 18:49

zmilan

1,16217 silver badges20 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:10:08Z

8

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

edited May 23, 2017 at 12:10

CommunityBot

11 silver badge

answered Feb 7, 2014 at 14:07

chrisjordanme

6128 silver badges11 bronze badges

Comments

Roy Daniels · Accepted Answer · 2013-07-07 21:23:47Z

2

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.

answered Jul 7, 2013 at 21:23

Roy Daniels

6,3092 gold badges30 silver badges29 bronze badges

Collectives™ on Stack Overflow

Can angularjs routes have optional parameter values?

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related