Trying to add $ionicLoading in all $http requests

Hi everyone, I am trying to create an Interceptor to all my $http requests to show and hide the $ionicLoading cause I don’t want to do this manually on all my requests. I tried using $httpProvivider.interceptors but when I tried I had problem with cyclic dependency, somebody already try to do this and have this problem?

Circular dependency found: $http <- $templateRequest <- $compile <- $ionicTemplateLoader <- $ionicLoading <- $http <- $templateFactory <- $view <- $state

Found a better solution here The interceptors of $httpProvider doesn't work for native app?
and here http://learn.ionicframework.com/formulas/loading-screen-with-interceptors/

1 Like

Why not use like

      .factory('Ajax', function($http, $ionicLoading, $q, web_service_url) {
        
            var post = function(method, data) {
              var q =  $q.defer();
              $ionicLoading.show(...);
              Logger.Info("Request: " + method + ", data: " + JSON.stringify(data));
              $http.post(web_service_url + method, data).success(function(response) {
                $ionicLoading.hide();
                Logger.Info("Success: " + method + ", Response: " + JSON.stringify(response));
    q.resolve(response);
              }).error(function(error, status) {
 $ionicLoading.hide();
                Logger.Info("Error: " + method + ", Response: " + JSON.stringify(error));
    q.reject(error);
              });
    return q.promise;
            };
       
           var  get =  (.....)
           
            return {
              post: post,
              get: get
            };
          })

There is a problem this way cause if I trigger more than one request at the same time, or before the response of the first request I will show loading on top of other loading and this not good for the user. I will try to use the other solution and fix this problem there too.