UI-Router 4 level state

Question

We are on a project which has the following multi level navigation tree:

main {
  inactive
  profile
  active
  admin {
    settings
    registration
    activePupil
    activeAdmin
    emergencyDetail {
      photos
    }
  }
}

And the actual Code:

$stateProvider
  // this state is placed in the <ion-nav-view> in the index.html
    .state('main', {
      url: '/main',
      abstract: true,
      templateUrl: 'main/templates/menu.html',
      controller: 'MenuCtrl as menu'
    })
    .state('main.inactive', {
      url: '/inactive',
      views: {
        'pageContent': {
          templateUrl: 'main/templates/inactive.html',
          controller: 'InactiveCtrl as inactive'
        }
      }
    })
    .state('main.profile', {
      url: '/profile',
      views: {
        'pageContent': {
          templateUrl: 'main/templates/profile.html',
          controller: 'ProfileCtrl as profile'
        }
      }
    })
    .state('main.active', {
      url: '/active',
      views: {
        'pageContent': {
          templateUrl: 'main/templates/active.html',
          controller: 'ActiveCtrl as active'
        }
      }
    })
    .state('main.admin', {
      url: '/admin',
      views: {
        'pageContent': {
          templateUrl: 'main/templates/admin.html',
          controller: 'AdminCtrl as admin'
        }
      }
    })
    .state('main.adminSettings', {
      url: '/admin/settings',
      views: {
        'pageContent': {
          templateUrl: 'main/templates/admin-settings.html',
          controller: 'AdminSettingsCtrl as adminsettings'
        }
      }
    })
    .state('main.adminRegistration', {
      url: '/admin/registration',
      views: {
        'pageContent': {
          templateUrl: 'main/templates/admin-registration.html',
          controller: 'AdminRegistrationCtrl as adminregistration'
        }
      }
    })
    .state('main.adminActivePupils', {
      url: '/admin/active/pupils',
      views: {
        'pageContent': {
          templateUrl: 'main/templates/pupils-active.html',
          controller: 'PupilsActiveCtrl as pupilsactive'
        }
      }
    })
    .state('main.adminActiveAdmins', {
      url: '/admin/active/admins',
      views: {
        'pageContent': {
          templateUrl: 'main/templates/admin-active.html',
          controller: 'AdminActiveCtrl as adminactive'
        }
      }
    })
    .state('main.adminEmergencyDetail', {
      url: '/admin/emergency/:id',
      views: {
        'pageContent': {
          templateUrl: 'main/templates/admin-emergency-detail.html',
          controller: 'AdminEmergencyCtrl as adminemergency'
        }
      }
    })
    .state('main.adminEmergencyDetailPhotos', {
      url: '/admin/emergency/:id/photos',
      views: {
        'pageContent': {
          templateUrl: 'main/templates/admin-emergency-photos.html',
          controller: 'AdminEmergencyCtrl as adminemergency'
        }
      }
    });
  $urlRouterProvider.otherwise('/main/inactive');

Unfortunately the currently existing answers aren't helping us at all. The same goes for the wiki of Angular UI-Router. How should we change the states that something like...

$state.go('main.admin.emergencyDetail.photos')

...is possible and so going back to main.admin.emergencyDetail will be possible?

Answer 1

Seems (If I do understand the issue) that you can just change the current flat state structure into hierarchical one. That's it.

Usually, child should inject its content into parent's view, but we can even keep the logic, that all children are targeting grand parent (main) view:

// admin will stay
.state('main.admin', {
  url: '/admin',
  views: {
    'pageContent': { ... }
  }
})    
// state nesting starts here
.state('main.adminEmergencyDetail', {
  // no need the use parent url .. it will be inherited
  //url: '/admin/emergency/:id',
  url: '/emergency/:id',
  views: {
    // target is main view
    //'pageContent': { ... }
    'pageContent@main': { ... }
  }
})
// same for all other siblings of the EmergencyDetail
...
// and grand child
.state('main.admin.EmergencyDetail.Photos', {
  // grand parent and parent url will be already in play
  //url: '/admin/emergency/:id/photos',
  url: '/photos',
  views: {
    // target is main view
    //'pageContent': { ... }
    'pageContent@main': { ... }
  }
});

And now we can go to the states as required

$state.go('main.admin.emergencyDetail.photos', {id: 12345});

NOTE: all children are injecting its view into main target 'pageContent'. I would suggest to add a targets into each state (i.e. into admin and emergencyDetail) so, children are not replacing parent

Some example with working plunker

Nested states or views for layout with leftbar in ui-router?