How should nested routes leading to another nested route be structured in Angular? UI.Router

Question

I have written all my UI.Router states as Angular directives, in the style of components such as seen in this tutorial: http://www.angular-meteor.com/tutorials/socially/angular1/routing-and-multiple-views)

Here is what I am trying to do. I have 3 main states with the following nested states:

-- Dashboard
-- personalNotes
------- unlockedPersonalNotes
------- lockedPersonalNotes
-- publicNotes
------- unlockedPublicNotes
------- lockedPublicNotes

As you can see, PublicNotes -> UnlockedPublicNotes is a nested state. UnlockedPublicNotes (and siblings) is a page that lists out notes. Clicking on a note should take you to the Detailed Notes page. My question is, will the Detailed Notes be its own nested-nested-state?

This is what my routing looks like at the moment:

$stateProvider
        .state('dashboard', {
          url: '/dashboard',
          template: '<dashboard></dashboard>'
        })
        .state('personalNotes', {
          url: '/personalNotes',
          template: '<personal-notes></personal-notes>'
          })
        .state('publicNotes', {
          url: '/publicNotes',
          template: '<public-notes></public-notes>'
        })

How should I go about setting this up in Angular's UI.Router? Perhaps there is a better way than triple nested states.

I am using Angular-Meteor if that matters. Thanks for the help! :)

Answer 1

This could be the nested structure:

$stateProvider
  .state('dashboard', {url: '/dashboard',template: '<dashboard></dashboard>'})
  .state('personalNotes', {url: '/personalNotes',template: '<personal-notes</personal-notes>'})
  .state('publicNotes', {url: '/publicNotes',template: '<public-notes></public-notes>'})
  .state('publicNotes.unlocked', {url: '/unlocked', template:'<ulpn></ulpn>'})
  .state('publicNotes.locked', {url: '/locked', template:'<lpn></lpn>'})
  .state('publicNotes.unlocked.details', {url: '/details', template:'<note-details></note-details>'})
  ...