ionic routing issue, shows blank page

Problem

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 app for example app.search, app.browse, app.playlists etc.

I have similar hierarchy. However, I want the start page to be some other page, which means it is at the app level.

The states look like this:

$stateProvider

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

.state('join', {
  url: "/join",
  views: {
    'menuContent' :{
      templateUrl: "templates/join.html",
      controller: 'joinCtrl'
    }
  }
})

.state('app.search', {
  url: "/search",
  views: {
    'menuContent' :{
      templateUrl: "templates/search.html",
      controller: 'searchCtrl'
    }
  }
})

.state('app.results', {
  url: "/results",
  views: {
    'menuContent' :{
      templateUrl: "templates/results.html",
      controller: 'resultsCtrl'
    }
  }
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/join');

When I run the app, the url defaults to

http://192.168.1.4:8100/#/join

and shows a blank page. Obviously, the join.html is not blank. Also, the console.log messages in joinCtrl are not outputted.

I am not able to figure out why is it not loading the join page. When I change the otherwise to point to '/app/search', everything works.

Any idea what's going on? How do I load the initial page by default and then navigate to the 'app.search' state?

Problem courtesy of: user1719160

Solution

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'

Solution courtesy of: Radim Köhler

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.