trying to add loading wheel using angular when i make ajax call?

Question

I am trying to implement loading wheel directive when we make ajax call so during the response time i want to display loading wheen, With below code i do not see any error neith

Answer 1

Instead of showing/hiding for each service call explicitly, you can use a directive to track the ajax request and show/hide the loading symbol at one place.

Below is the similar implementation

Place the loading icon container in index.html

Styling

.loading-icon-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  z-index: 99999;
  opacity: 0.6;
}

.loading-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  padding: 5px;
  border: 1px solid black;
}

Implement loading directive

return {
    restrict: 'A',
    link: function(scope, element, attrs) {
        scope.$watch(function() {
            return $http.pendingRequests.length > 0;
        }, function(hasPending) {
            if (hasPending) {
                element[0].style.display = '';
            } else {
                element[0].style.display = 'none';
            }
        });
    }
}

Demo

angular
  .module('myApp', []);

angular
  .module('myApp')
  .controller('MyController', MyController)
  .directive('loading', loading)
  .factory('serviceFactory', serviceFactory);

MyController.$inject = ['$scope', 'serviceFactory'];

function MyController($scope, serviceFactory) {

  $scope.serviceCall = function() {
    var reqObj = {
      url: 'https://reqres.in/api/users?delay=3/photos',
      method: 'GET'
    }
    serviceFactory
      .serviceCall(reqObj)
      .then(function(data) {
        $scope.responseText = data.data;
        console.log(data);
      });
  };
}

loading.$inject = ['$http'];

function loading($http) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      scope.$watch(function() {
        return $http.pendingRequests.length > 0;
      }, function(hasPending) {
        if (hasPending) {
          element[0].style.display = '';
        } else {
          element[0].style.display = 'none';
        }
      });
    }
  };
}

serviceFactory.$inject = ['$http'];

function serviceFactory($http) {
  var obj = {};
  obj.serviceCall = function(reqObj) {
    return $http(reqObj).then(function(success) {
      return success.data;
    });
  };
  return obj;

}

.loading-icon-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  z-index: 99999;
  opacity: 0.6;
}

.loading-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  padding: 5px;
  border: 1px solid black;
}

  Servie call