angularjs - 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 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?

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'