Hey πŸ‘‹πŸ»

My name is Christian, an Agile Developer, living in Trento (IT)

I write good code at Wonderflow

You can follow me on and Github


More about me πŸ€–




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

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