Loading "spinner" and Restangular: how to use them together

ionic-v1
1

Hello, I’m following this tutorial:

learn.ionicframework.com/formulas/loading-screen-with-interceptors/

I want to have a loading “spinner” while my content are fetched with an api call.
I’m using Restangular to manage the Restful API.

In my routes.js I have

.state('app.galleries', {
    url: "/galleries",
    views: {
      'menuContent': {
        templateUrl: "templates/gallery_index.html",
        controller: 'GalleriesCtrl',
        resolve: {
          galleries : ['GalleryFactory', function(GalleryFactory) {
              return GalleryFactory.getList();
          }]
        }
      }
    }
  })

My Factory

angular.module('starter')

.factory('GalleryFactory', ['Restangular', function(Restangular) {
    return Restangular.service('galleries');
}]);

And my controller

angular.module('starter')

.controller('GalleriesCtrl', function($scope, galleries) {
  $scope.galleries = galleries;
})

Everything works fine but I don’t have the loading spinner! Where is the problem?

Do I have to modify this to work with Restangular?

app.config(function($httpProvider) {
  $httpProvider.interceptors.push(function($rootScope) {
    return {
      request: function(config) {
        $rootScope.$broadcast('loading:show')
        return config
      },
      response: function(response) {
        $rootScope.$broadcast('loading:hide')
        return response
      }
    }
  })
})

Thank you

2

I am using angular-loading-bar with Restangular and it works automagically for every http request. I don’t need to write additional interceptors, so you might want to look into their source code

1 Like