Heyyy ๐Ÿ‘‹๐Ÿป ! My name is Christian, an Agile Software Developer, living in Trento (IT).
I am currently working at Wonderflow.
You can read more about me.

Angular ui-router: define multiple states with same base url

,
by

Share on Twitter

Recently on pomodoro.cc I found myself in need of the following routes:

  • /public
  • /public/:id

To define a similar structure you canโ€™t have three separate states defined sharing the same base url.

What you can do is to define an abstract state and then the descendent child states, e.g.:

...
.state('public', {
  abstract: true,
  url: '/public',
  template: '<ui-view/>'
})
  .state('public.index', {
    url: '',
    templateUrl: 'public/index.html',
    controllerAs: 'PublicIndexCtrl as vm'
  })
  .state('public.room', {
    url: '/:id',
    templateUrl: 'public/room.html',
    controllerAs: 'PublicRoomCtrl as vm'
  })