Last Updated: February 25, 2016
· croustibat

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;

        // add action here...

       // Hide overlay when done

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

.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 = ${

              // 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(){

Use $rootScope here instead of $scope ;)

That's all.

Ionic Framework :