"optional" params in AngularJS states/views with ui-router

Question

I have a customer search view that, by default, simply loads a form for first and last name. It can, however, take those params as arguments in the URL. My app config contains:

    $stateProvider         .state({             name:        "search",             url:         "/search",             templateUrl: "partials/customerSearch.html",             controller:  "CustomerSearchCtrl"         })         .state({             name:        "searchGiven",             url:         "/search/:fn/:ln",             templateUrl: "partials/customerSearch.html",             controller:  "CustomerSearchCtrl"         }) 

This works, but it seems like it has unnecessary redundancies. Is there a better way? Is this something $urlRouterProvider should handle?

Answer 1

There's an issue in ui-router tracker about optional parameters. As of now, you can not specify them in clear way, but you can use regular expressions:

url: '/search{fn:(?:/[^/]+)?}' 

or query parameters:

url: '/search?fn&ln' 

People are working on it, though, so I'd expect desired functionality to land sometime in the future.

Answer 2

You can use:

$stateProvider .state({     name:        "searchGiven",     url:         "/search/{fn}/{ln}",     params: {         fn: {value: 'foo'},         ln: {value: 'bar'}     },     templateUrl: "partials/customerSearch.html",     controller:  "CustomerSearchCtrl" })