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/