13

I tried to set up my routing like this

...
url: '/view/:inboxId?'
...

but Angular would throw this error:

Error: Invalid parameter name '' in pattern '/view/:inboxId?'

so basically I had to set up two different states:

state('view', {
            url: '/view/:inboxId',
            templateUrl: 'templates/view.html',
            controller: 'viewCtrl'
        }).

        state('view_root', {
            url: '/view',
            templateUrl: 'templates/view.html',
            controller: 'viewCtrl'
        })

Is there any way to combine these states into one?

Improve this question

3 Answers 3

Reset to default
8

To have an optional param - declare it as you did - but do not pass it. Here is an example. That all could work with one state (no root) or two (root and detail) as you like.

The definition mentioned in the question, is ready to handle these state calls:

// href
<a href="#/view/1">/view/1</a> - id is passed<br />
<a href="#/view/"> /view/ </a> - is is missing - OPTIONAL like <br />
<a href="#/view">  /view  </a> - url matching the view_root

// ui-sref
<a ui-sref="view({inboxId:2})">    - id is passed<br /> 
<a ui-sref="view">                 - is is missing - OPTIONAL like
<a ui-sref="view({inboxId:null})"> - id is explicit NULL <br />
<a ui-sref="view_root()">          - url matching the view_root

We do not have to use ? to mark parameter as optional. Just both url must be unique (e.g. /view/:id vs /view - where the second does not have trailing /)

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

2 Comments

I think this will change with 0.3.0: github.com/angular-ui/ui-router/issues/1476
I disagree with your statement - "That all could work with one state (no root)." With a single state, the one with the parameter declared in the url, the "#/view" url would not match. It would require a closing slash - "#/view/". I would love for ui-router to support truly optional single parameters with one state, but it does not. Even the newer "optional parameters" where you specify defaults in a params object require the closing slash before them.
3 

.state('home', {
    url: '/home/:id/:token',
    templateUrl: 'views/home.html',
    controller: 'homeController',
    params: {
        id: { squash: true, value: null },
        token: { squash: true, value: null }
    }
})

Improve this answer

1 Comment

This should be the correct answer. Using "squash" makes the parameter optional and "value" allows you to set a default when the parameter is not supplied.
1

The code below allows for truly optional parameters, if you don't mind having a couple extra states.

I turned my original state into an abstract one by adding the abstract attribute, and then created two children states, one with a url that has params, one with a blank url that references the parent.

It works well on my dev site, and doesn't require a trailing slash, in fact, if you want the trailing slash, you'll have to add a state/when for it.

  .state('myState.search', {
    url:'/search',
    templateUrl: urlRoot + 'components/search/search.view.html',
    controller: 'searchCtrl',
    controllerAs: 'search',
    abstract: true,
  })
  .state('myState.search.withParams', {
    url:'/:type/:field/:operator/:value',
    controller: 'searchCtrl',//copy controller so $stateParams receives the params
    controllerAs: 'search'
  })
  .state('myState.search.noParams', {
    url:''
  });
Improve this answer

1 Comment

Thanks for contributing, it really makes a difference when people add alternatives. While a strict answer is correct, you never know other peoples use case. Cheers!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.