AngularJS ui-router optional parameters

问题:

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?

回答1:

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 /)

回答2:

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

回答3:

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