Is there a way to incorporate $ionicLoading with Angular's UI Router resolves? The goal is to display a loading modal when a new route/state is requested and have it disappear once the data is resolved and the new state is loaded.
router
.state('tab.locations', {
url: '/locations',
cache: false,
views: {
'locations-tab': {
templateUrl: 'js/locations/tab-locations.html',
controller: 'LocationsCtrl as vm'
}
},
resolve: {
locationsResource: 'Locations',
locations: function(locationsResource) {
return locationsResource.all();
}
}
})
If resolves are not used, one approach is to utilize $httpProvider.interceptors to trigger events for showing and hiding the loading screen. For example:
$ionicConfigProvider
$httpProvider.interceptors.push(function($rootScope) {
return {
request: function(config) {
$rootScope.$broadcast('loading:show');
return config
},
response: function(response) {
$rootScope.$broadcast('loading:hide');
return response
}
}
})
runBlock
$rootScope.$on('loading:show', function() {
$ionicLoading.show({template: '<ion-spinner></ion-spinner>'})
});
$rootScope.$on('loading:hide', function() {
$ionicLoading.hide()
});
This setup works well without resolves. However, when using resolves, the loading screen does not appear.
Attempts were made to broadcast loading:show on $stateChangeStart if a resolve is present, but that did not solve the issue.
Are there other interceptors or state change events that should be utilized to trigger loading:show and loading:hide in order to make $ionicLoading work seamlessly with resolves?