optional parameters in ui.router url

Question

I am trying to show the same view regardless of whether the :id parameter is set in the url. I have this but the /cases route doesn't seem to work without the :id.

.state 'messages',
  url: '/cases',
  views:
    '':
      templateUrl: 'views/messages.html',
      controller: 'MessagesCtrl'
    'ticketList@messages':
      templateUrl: 'views/messages/list.html'
    'ticketComments@messages' :
      templateUrl: '/views/messages/comments.html'
    'ticketDetail@messages' :
      templateUrl: '/views/messages/detail.html',
.state 'messages.id',
  url: '/cases/:id',
  views:
    '':
      templateUrl: 'views/messages.html',
      controller: 'MessagesCtrl'
    'ticketList@messages':
      templateUrl: 'views/messages/list.html'
    'ticketComments@messages' :
      templateUrl: '/views/messages/comments.html'
    'ticketDetail@messages' :
      templateUrl: '/views/messages/detail.html',

try using one route with query parameters `url: '/cases?id'` instead. you can still access them inside the controller with `$stateParams.id` — Tj Gienger, Aug 19 '15 at 00:05
you use nested states, so you should remove "/cases" from your "messages.id" state: url: '/:id'. Otherwhise your url looks like: "/cases/cases/:id" — BastianW, Aug 19 '15 at 00:12
also you could remove your second state (because you use the same templates and controllers) and change your first "url" to: url: '/cases[/:id]' — BastianW, Aug 19 '15 at 00:16

score 1 · Answer 1 · edited May 23 '17 at 11:46

You are almost there - just child inherits url from its parent. So to make just cases working, we should do:

.state 'messages',
  url: '/cases',
  ....
.state 'messages.id',
  // url: '/cases/:id', // instead of this
  url: '/:id',          // we need this

And we can do even more, e.g. use params :{} to define more precise settings. Check these for example:

optional parameters in ui.router url

1 Answers1