Hierarchical States in "sidemenu" example ui-router

ionic-v1
1

Can someone please give a codepen example or something showing how to uses hierarchical states (HS)?

I can make HS such as “find” and “find.search”, but if I leave out the “app” top-level state in the sidemenu example, then I won’t have the menu system.

If I try to make substates from app, as in app.find.search, I just get white-screen with no errors:

    .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "templates/menu.html",
    controller: 'AppCtrl'
  })

  .state('find', {
    url: "/find",
    views: {
      'menuContent': {
        template: "find template"
      }
    }
  })

  .state('find.search', {
      url: "/find/search", // I've also tried just /search here
      views: {
        'menuContent': {
          templateUrl: "templates/search.html"
        }
      }
    })

    //..
    $urlRouterProvider.otherwise('/app/find/search');
2

So from looking at your code, I can see mistake.

.state('find', { should be .state('app.find', {
which would also change .state('find.search', { to .state('app.search', {

3

@mhartington

But how can I make search a sub-state of find and accessible through the sidemenu?

When I try creating and using app.find and the substate app.find.search, I get the white-screen.

.config(function($stateProvider, $urlRouterProvider) {

$stateProvider

.state('app', {
  url: "/app",
  abstract: true,
  templateUrl: "templates/menu.html",
  controller: 'AppCtrl'
})
.state('app.find', {
  url: "/app/find",
  views: {
    'menuContent': {
      template: "find template"
    }
  }
})
// doesn't work
// .state('app.find.search', {
//   url: "/search",
//   views: {
//     'menuContent': {
//       templateUrl: "templates/search.html"
//     }
//   }
// })
// works
.state('app.search', {
  url: "/search",
  views: {
    'menuContent': {
      templateUrl: "templates/search.html"
    }
  }
})
4

For this

.state('app.find.search', {

to work, app.find would need to be an abstract state. Try to think less on how the states can be structured in relation to one another, but how everything is related to the one ion-nav-view, menuContent.

http://codepen.io/ionic/pen/tcIGK

Look at how the states are set up in our default example. Also, the side-menu starter project

5

I had the same problem, this link has saved my day: Angularjs Nested states: 3 level.

6

@dtslvr You, sir, saved my day.