Newbie help with multiple templates

ionic-v1
1

I’m fairly new to both AngularJS and Ionic, so I’m sure I’ve got something silly going on. I started off with the Ionic tab example and want to add a new state that loads some JSON from a back-end service which basically says “OK” to the app to continue to the main tab page. I added a new state in app.js:

.state('load', {
  url: '/load',
  views: {
    'load': {
      templateUrl: 'templates/load.html',
      controller: 'LoadCtrl'
    }
  }
})

And created load.html:

<ion-view title="Loading" name="load">
<ion-content class="has-header padding">
	<div class="list">
	  <div class="item item-text-wrap">
		Please hold while we start up...
	  </div>
	</div>
</ion-content>
</ion-view>

and added a LoadCtrl to controller.js

.controller('LoadCtrl', function($scope) {
var apiBase = "http://my.web.service/something";

$http({
	url: apiBase + "/specialhandler",
	method: 'GET',
	timeout: 10000,
})
.success(function(data, status, headers, config) {
	if (data != null && data.success == "true")
	{
		$location.path('/dash');
	}
	else
	{
		$location.path('/login');
	}
})
.error(function(data, status, headers, config) {
	$location.path('/login');
});
})

and set the default router to go to /load via

$urlRouterProvider.otherwise('/load');

I can see via debugging that /templates/load.html is being loaded successfully, but I don’t get any content loaded. I’m expecting to see the text “Please hold while we start up…” before routing to some other page, but it’s just a blank white screen without any text.

If anybody has any pointers, I’d be much appreciative!

  • Shane
2

Because your “load” state is not part of an abstract state, you don’t need the “view” part of the state definition.

Just change it to this:

.state('load', {
  url: '/load',
  templateUrl: 'templates/load.html',
  controller: 'LoadCtrl'
})
3

Thanks! That fixed it!