Cordova/Ionic/AngularJs loader Service

The Ionic Framework documentation is not really clear about the loading overlay. So to easliy trigger the loader in all your controllers like in this example :

.controller(IndexCtrl', function($scope, LoaderService) {

 // Show loader from service
 LoaderService.show();

 // add action here...

 // Hide overlay when done
 LoaderService.hide();
}

you just have to create a service like this one (in /js/service.js for example) :

angular.module('starter.services')
.factory('LoaderService', function($rootScope, $ionicLoading) {

 // Trigger the loading indicator
 return {
 show : function() { //code from the ionic framework doc

 // Show the loading overlay and text
 $rootScope.loading = $ionicLoading.show({

 // The text to display in the loading indicator
 content: 'Loading',

 // The animation to use
 animation: 'fade-in',

 // Will a dark overlay or backdrop cover the entire view
 showBackdrop: true,

 // The maximum width of the loading indicator
 // Text will be wrapped if longer than maxWidth
 maxWidth: 200,

 // The delay in showing the indicator
 showDelay: 500
 });
 },
 hide : function(){
 $rootScope.loading.hide();
 }
 }
});

Use $rootScope here instead of $scope ;)

That's all.

Ionic Framework : http://ionicframework.com/

Related protips

Have a fresh tip? Share with Coderwall community!