“optional” params in AngularJS states/views with u

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

You can use:

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

Answer 2

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 3

There is an update, you can do that:

$stateProvider.state("foo", {
  url: "/search/{fn}/{ln}"
});

As nateabele commented at the issue about optional parameters: view here