AngularJS$http加载屏幕兼容性

我使用下面的angular模块创建一个加载屏幕，直到所有$http请求完成。它在angular 1.0.7上运行良好，但在angular 1.2.10上不起作用。我需要使用角度资源，还有角度路线，所以我不能停留在角度1.0.7上。有人能帮我重写这篇文章来处理最新版本吗

angular
.module('loadingOnAJAX', [])
.config(function($httpProvider) {
    var numLoadings = 0;
    var loadingScreen = $('<div style="position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;background-color:gray;background-color:rgba(70,70,70,0.2);"><img style="position:absolute;top:50%;left:50%;" alt="" src="loading.gif" /></div>')
        .appendTo($('body')).hide();

    $httpProvider.responseInterceptors.push(function() {
        return function(promise) {
            numLoadings++;
            loadingScreen.show();
            var hide = function(r) {
                if (!(--numLoadings)){
                    loadingScreen.hide();
                }
                return r;
            };
            return promise.then(hide, hide);
        };
    });
});

angular
.module（'loadingOnAJAX'，[]）
.config（函数（$httpProvider）{
var numLoadings=0；
变量加载屏幕=$（''）
.appendTo（$（'body'））.hide（）；
$httpProvider.responseInterceptors.push（函数（）{
返回函数（承诺）{
numload++；
加载screen.show（）；
变量隐藏=函数（r）{
如果（！（-numload））{
loadingScreen.hide（）；
}
返回r；
};
回报承诺。然后（隐藏，隐藏）；
};
});
});

在angular 1.2.10中，加载屏幕不会出现，但是如果我在hide函数中放置了一个alert（），则加载屏幕会出现，直到我按下报警上的OK。所以我不确定事情是发生得太快了，还是发生了什么

更正版本：

angular
.module（'loadingOnAJAX'，[]）
.config（函数（$httpProvider）{
var numLoadings=0；
变量加载屏幕=$（''）
.appendTo（$（'body'））.hide（）；
$httpProvider.interceptors.push（函数（）{
返回{
“请求”：函数（配置）{
numload++；
加载screen.show（）；
返回配置；
},
“响应”：函数（响应）{
如果（！（-numload））{
loadingScreen.hide（）；
}
返回响应；
}
};
});
});

看一看你的忙。它很容易实现

请注意，在页面上，您还可以找到安迪·乔斯林（Andy Joslin）出色的角度承诺跟踪器的链接。这应该是你自己实验的基础。

.module（'loadingOnAJAX'，[]）
.config（函数（$httpProvider）{
var numLoadings=0；
变量加载屏幕=$（''）
.appendTo（$（'body'））.hide（）；
$httpProvider.interceptors.push（函数（）{
返回{
“请求”：函数（配置）{
numload++；
加载screen.show（）；
返回配置；
},
“响应”：函数（响应）{
如果（！（-numload））{
loadingScreen.hide（）；
}
返回响应；
}
};
});
});

此版本的拦截器已弃用。看，谢谢，我一开始就应该意识到这一点！我已经在上面发布了我的新工作版本，使用了您建议的文档链接中的信息。

angular
.module('loadingOnAJAX', [])
.config(function($httpProvider) {
    var numLoadings = 0;
    var loadingScreen = $('<div style="position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;background-color:gray;background-color:rgba(70,70,70,0.2);"><img style="position:absolute;top:50%;left:50%;" alt="" src="loading.gif" /></div>')
        .appendTo($('body')).hide();

    $httpProvider.interceptors.push(function() {
        return {
            'request': function(config){
                numLoadings++;
                loadingScreen.show();
                return config;
            },
            'response': function(response){
                if (!(--numLoadings)){
                    loadingScreen.hide();
                }
                return response;
            }
        };
    });
});

angular
.module('loadingOnAJAX', [])
.config(function($httpProvider) {
var numLoadings = 0;
var loadingScreen = $('<div style="position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;background-color:gray;background-color:rgba(70,70,70,0.2);"><img style="position:absolute;top:50%;left:50%;" alt="" src="loading.gif" /></div>')
    .appendTo($('body')).hide();

$httpProvider.interceptors.push(function() {
    return {
        'request': function(config){
            numLoadings++;
            loadingScreen.show();
            return config;
        },
        'response': function(response){
            if (!(--numLoadings)){
                loadingScreen.hide();
            }
            return response;
        }
    };
});
});