Angularjs Nested states: 3 level

Question

I am using Agnularjs and Ionic Framework. I am trying to achieve a nested states, which looks like below,

• Eventmenu(root)
•   Home (2 level)
•     Home 1 (3 level)
•     Home 2
•   checkin
•   attendee

My routes file looks like,

angular.module('ionicApp', ['ionic'])

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

  $stateProvider
    .state('eventmenu', {
      url: "/event",
      abstract: true,
      templateUrl: "event-menu.html"
    })
    .state('eventmenu.home', {
      url: "/home",
      views: {
        'menuContent' :{
          templateUrl: "home.html"
        }
      }
    })
      .state('eventmenu.home.home1', {
      url: "/home1",
      views: {
        'menuContent' :{
          templateUrl: "home1.html"
        }
      }
    })
        .state('eventmenu.home.home2', {
      url: "/home2",
      views: {
        'menuContent' :{
          templateUrl: "home2.html"
        }
      }
    })
    .state('eventmenu.checkin', {
      url: "/check-in",
      views: {
        'menuContent' :{
          templateUrl: "check-in.html",
          controller: "CheckinCtrl"
        }
      }
    })
    .state('eventmenu.attendees', {
      url: "/attendees",
      views: {
        'menuContent' :{
          templateUrl: "attendees.html",
          controller: "AttendeesCtrl"
        }
      }
    })

  $urlRouterProvider.otherwise("/event/home");
})

For full example, please see codepen: http://codepen.io/liamqma/pen/mtBne

/event/home
/event/checkin

are working, but

/event/home/home1
/event/home/home2

are not working.

Any help is greatly appreciated. Thanks!

Meliorism

Wheres the ionic part? This looks like a normal angularJS app no Ionic directives anywhere... – Repay

Answer 1

I solved your problem there : http://codepen.io/yrezgui/pen/mycxB

Basically, Ionic is using Angular-UI-Router which has a huge API. In your case, you need to check this link to understand : https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names

To be short, home1 and home2 states are children of home state, so they can't have access of menuContent view, because it's related to eventmenu state.

So you need to write :

.state('eventmenu.home.home2', {
  url: "/home2",
  views: {
    'menuContent@eventmenu' :{
      templateUrl: "home2.html"
    }
  }
})

Instead of :

.state('eventmenu.home.home2', {
  url: "/home2",
  views: {
    'menuContent' :{
      templateUrl: "home2.html"
    }
  }
})

And home1 wasn't working even after this modification because its url was :

url: "/home/home1",

Instead of :

url: "/home1",

By writing eventmenu.home.home1, you make home1 a child of home, so its url needs to be relative, not absolute.

Hope you understand it and have fun with Ionic ;)

Aila

problem is you don't get sweet ionic page transitions :'( great post nonetheless @Yacine – Katonah

What if eventmenu.home state was an abstract layer too, like eventmenu is? – Shadchan

@MarcelFalliere did you manage to have a good transition effect with your case? I tried everything, to create abstract layer for level 2 page with separate ion-nav-view, but the views are jumping... ? – Packton

Thank you. So in other words, add the parent with @ after view name. – Triarchy