Loadin angular rest

If you want to do this, you would have to develop a Interceptor , which as its name says, intercepts these calls both synchronous and asynchronous before delivering some type of response.

The value of $q is basically a service that helps or helps when running asynchronous tasks you can manage their return values.

.factory('HttpInterceptor', ['$rootScope', '$q', '$timeout', function($rootScope, $q, $timeout) {

    return {
        'request': function(config) {

            $timeout(function() {
                $rootScope.isLoading = true; 
            }, 200);

            return config || $q.when(config);
        },
        'requestError': function(rejection) {
            /*...*/
            return $q.reject(rejection);
        },
        'response': function(response) {

            $rootScope.isLoading = false; 

            return response || $q.when(response);
        },
        'responseError': function(rejection) {
            /*...*/
            return $q.reject(rejection);
        }
    };
}])

Then in your configuration you set this Interceptor

app.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.interceptors.push('HttpInterceptor');
}])

And finally the value of your loading

<div class="loading" ng-show="isLoading"></div>

It is up to you to design the loading as you want it, if a gif or something like that!

You can use SweetAlert2 from Limonte. I think it does not need an explanation because it's very easy to use: link

How easy you see it @sioesi but not so much, I have the following files:

test_controler.js

var App = angular.module('SimulatorApp', ['ngRoute', 'ngMaterial', 'ngAria', 'ngResource']);

App.controller('EOGController', ['$scope', '$http', '$resource' , 'InitService', function($scope, $http, $resource, InitService) {  
$scope.isLoading = false;
..... aquí las funciones
}]);

App.config(['$httpProvider', function ($httpProvider) {
$httpProvider.interceptors.push('HttpInterceptor');
}])

test_service.js

App.factory('InitService', ['$http','$q',function($http, $q) {
    var REST_SERVICE_URI = 'http://localhost:8090/test/databases';
...y aqui las funciones que que el controlador llama

filter_service.js:

Tengo exactamente lo que me has puesto

index.html:

isLoading : {{isLoading}}
<div class="loading" ng-show="isLoading">testing</div>

The value of isLoading is always false

You could create a directive, which uses the angular $ http service to get the pending calls in process.

.directive('loadingSpinner',   ['$http' ,function ($http)
    {
        return {
            link: function ($scope, $elm, $attrs)
            {
                $scope.loadingRequests= function () {
                    var pendingRquests = $http.pendingRequests.length > 0 ? true :  false;
                    return pendingRquests 
                };

                scope.$watch($scope.loadingRequests, function (values)
                {
                    if(value){
                        elm.show();
                    }else{
                        elm.hide();
                    }
                });
            }
        };

    }]);

Then your HTML would look like this.

<img src="../loading.gif" loading-spinner />