$ ionicLoading with Angular UI Router allows

Question

I am trying to use $ ionicLoading with Angular UI Router permission. The idea is that when a new route / state is requested, the load mode appears during data resolution, and then disappears when resolution ends, and a new state is created.

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 permission, 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 the resolution is enabled, the boot screen is no longer displayed.

I tried broadcasting loading:show on $stateChangeStart if a solution is present, but this also does not work.

Are there other interceptors or state change events that I need to broadcast loading:show and loading:hide in order to make $ionicLoading work with permission?

Answer 1

I recently ran into this problem and it 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 on 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 permission, it doesn't work out of the box.
You can use a simple module that works great by intercepting all your $ http requests.
https://github.com/chieffancypants/angular-loading-bar
This causes some events that can be used in $ rootScope. $ On .

cfpLoadingBar: started , run once on the first XHR request. It will be repeated if another request disappears after running cfpLoadingBar: completed.

cfpLoadingBar: Completed starts once when all XHR requests are returned (successful or not)

For someone still struggling with this issue :)

Answer 3

This is how I solved it in the application that I am developing:

 export var ngModule = angular.module('myApp', ['ionic']); ngModule.run(($ionicPlatform: ionic.platform.IonicPlatformService, $state: ng.ui.IStateService, $rootScope: ng.IRootScopeService, $ionicLoading: ionic.loading.IonicLoadingService) => { $ionicPlatform.ready(function () { if (window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); cordova.plugins.Keyboard.disableScroll(true); } if (window.StatusBar) { StatusBar.styleDefault(); } $rootScope.$on("$stateChangeStart", (event, toState, toParams, fromState, fromParams) => { $ionicLoading.show({ delay: 200, template: "Loading..." }); }); $rootScope.$on("$stateChangeSuccess", (event, toState: ng.ui.IState, toParams, fromState, fromParams) => { $ionicLoading.hide(); }); $rootScope.$on("$stateChangeError", (event, toState, toParams, fromState, fromParams, error) => { $ionicLoading.hide(); console.error("Error loading the page: %o", error); }); $state.go("login"); }); }); 

This is in TypeScript, but I'm sure it makes no sense to translate it into JavaScript.

In fact, you do not need http interceptors or angular events not being broadcast.