$ionicLoading with Angular UI Router resolves

Question

I'm trying to use $ionicLoading with Angular UI Router resolves. The idea being that when a new route/state is requested the loading modal appears while the data is being resolved, then disappears when the resolve completes and the new state is instantiated.

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();
    }
  }
})

Without the resolve, one recommended method is to use $httpProvider.interceptors to broadcast events to show and hide the loading screen. Like this:

$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 works great when not using resolves. But when resolves work the loading screen no longer appears.

I have tried broadcasting loading:show on $stateChangeStart if a resolve is present but that also does not work.

Are there other interceptors or state change events I should be broadcasting loading:show and loading:hide on to make $ionicLoading work with resolves?

Answer 1

I recently ran into this problem and this worked for me in the run block:

$rootScope.$on('loading:show', function () {
    $ionicLoading.show({
        template:'Please wait..'
    })
});

$rootScope.$on('loading:hide', function () {
    $ionicLoading.hide();
});

$rootScope.$on('$stateChangeStart', function () {
    console.log('please wait...');
    $rootScope.$broadcast('loading:show');
});

$rootScope.$on('$stateChangeSuccess', function () {
    console.log('done');
    $rootScope.$broadcast('loading:hide');
});

I found it in the Ionic forum here

Answer 2

Even I had the same problem. It works great with simple HTTP requests but when you start using state resolve it doesn't work out of the box.
You can use a simple module which works great by intercepting all of your $http requests.
https://github.com/chieffancypants/angular-loading-bar
This raises some events which you can use on $rootScope.$on.

cfpLoadingBar:started triggered once upon the first XHR request. Will trigger again if another request goes out after cfpLoadingBar:completed has triggered.

cfpLoadingBar:completed triggered once when the all XHR requests have returned (either successfully or not)

For someone still fighting with this problem :)