ionic routing issue, shows blank page

Question

I started building ionic app on top of the sidemenu starter app. The starter app has a base state \'app\' which is abstract and all the sidemenu pages are children of the ap

Answer 1

I would expect that because the app is abstract - it is there for a reason. To be parent/layout state. In its template should most likely live all other states.

If yes - check this working example I created to demonstrate that. What we need is to mark the join as a child of the app state. Then the 'menuContent' placeholder will be properly searched in the app template:

.state('join', {
      parent: 'app',
      url: "^/join",
      views: {
        'menuContent': {
          templateUrl: "tpl.join.html",
          controller: 'joinCtrl'
        }
      }
})

There is a working plunker

The definition url: "^/join", is there to support the idea, that the url defined like this:

// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/join');

will work even for nested state (join is child of app). See:

Absolute Routes (^)

If you want to have absolute url matching, then you need to prefix your url string with a special symbol '^'.

This is just one way... we can do the similar stuff if the join is not nested state, but then it should target the unnmaed view '' instead of 'menuContent'