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

Klaster_1 Нет войне · Accepted Answer · 2014-02-24 02:46:44Z

25

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.

edited Feb 24, 2014 at 2:46

answered Feb 24, 2014 at 2:12

Klaster_1 Нет войне

12.2k9 gold badges65 silver badges75 bronze badges

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

3 Comments

nshew13 Over a year ago

The first option doesn't work. For search/John/Smith I get fn="" and no ln. Using query params seems to cause the params to "stick" to the URL in further states/views, which is not acceptable.

Ross Rogers Over a year ago

It may be fixed, but it is not on the latest release (0.2.10) as of 6/23/2014.

Serge Neff Over a year ago

v0.2.10. For me fn matches leading / as well. I.e. in /search/123 fn is matched to /123

George · Accepted Answer · 2016-12-07 19:35:56Z

11

You can use:

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

edited Dec 7, 2016 at 19:35

George

4,4133 gold badges33 silver badges33 bronze badges

answered Oct 22, 2014 at 13:59

user435943

97410 silver badges14 bronze badges

1 Comment

Ali Adravi Over a year ago

It is not optional, even if we don't need to pass anything then ...com/search will not work but we need to use ...com/search// which is not good.

Itay Radotzki · Accepted Answer · 2014-12-16 15:57:24Z

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

answered Dec 16, 2014 at 15:57

Itay Radotzki

8571 gold badge8 silver badges11 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Linked

Related