使用 httpInterceptor 和 AngularJS 1.1.5 实现加载微调器 [英] Implementing loading spinner using httpInterceptor and AngularJS 1.1.5

问题描述

我在 SO 上找到了一个用于 http/resource 调用的加载微调器示例:

• 在 httpIntercept 上设置 rootScope 变量(Plunker:http://plnkr.co/edit/32Mh9UOS3Z4vnOtrH9aR?p=preview)

如您所见，实现有效(使用 AngularJS 1.0.5).但是，如果您将源更改为 AngularJS 1.1.5.该示例不再有效.

我了解到 $httpProvider.responseInterceptors 在 1.1.5 中已被弃用.相反，应该使用 $httpProvider.interceptors

不幸的是，仅仅在Plunker中替换上面的字符串并没有解决问题.有没有人在 AngularJS 1.1.5 中使用 HttpInterceptor 做过这样的加载微调器?

感谢您的帮助！

迈克尔

解决方案

感谢 Steve 的提示，我能够实现加载器:

拦截器:

.factory('httpInterceptor', function ($q, $rootScope, $log) {var numLoadings = 0;返回 {请求:功能(配置){numLoadings++;//显示加载器$rootScope.$broadcast("loader_show");返回配置 ||$q.when(配置)},响应:函数(响应){如果 ((--numLoadings) === 0) {//隐藏加载器$rootScope.$broadcast("loader_hide");}回复回复 ||$q.when(响应);},响应错误:函数(响应){如果 (!(--numLoadings)) {//隐藏加载器$rootScope.$broadcast("loader_hide");}返回 $q.reject(response);}};}).config(function ($httpProvider) {$httpProvider.interceptors.push('httpInterceptor');});

指令:

.directive("loader", function ($rootScope) {返回函数 ($scope, element, attrs) {$scope.$on("loader_show", function () {返回元素.show();});return $scope.$on("loader_hide", function () {返回 element.hide();});};})

CSS:

#loaderDiv {位置:固定；顶部:0；右:0；底部:0；左:0；z-索引:1100；背景颜色:白色；不透明度:.6；}.ajax加载器{位置:绝对；左:50%；顶部:50%；左边距:-32px；/* -1 * 图像宽度/2 */边距顶部:-32px；/* -1 * 图像高度/2 */显示:块；}

HTML:

<img src="src/assets/img/ajax_loader.gif" class="ajax-loader"/>

I've found an example of a loading spinner for http/resource calls here on SO:

• Set rootScope variable on httpIntercept (Plunker: http://plnkr.co/edit/32Mh9UOS3Z4vnOtrH9aR?p=preview)

As you can see the implementation works (using AngularJS 1.0.5). However if you change the sources to AngularJS 1.1.5. The example does not work anymore.

I learned that $httpProvider.responseInterceptors is deprecated in 1.1.5. Instead one should use $httpProvider.interceptors

Unfortunately just replacing the above string in the Plunker did not solve the problem. Has anyone ever done such a loading spinner using HttpInterceptor in AngularJS 1.1.5?

Thanks for your help!

Michael

解决方案

Thanks to Steve's hint I was able to implement the loader:

Interceptor:

.factory('httpInterceptor', function ($q, $rootScope, $log) {

    var numLoadings = 0;

    return {
        request: function (config) {

            numLoadings++;

            // Show loader
            $rootScope.$broadcast("loader_show");
            return config || $q.when(config)

        },
        response: function (response) {

            if ((--numLoadings) === 0) {
                // Hide loader
                $rootScope.$broadcast("loader_hide");
            }

            return response || $q.when(response);

        },
        responseError: function (response) {

            if (!(--numLoadings)) {
                // Hide loader
                $rootScope.$broadcast("loader_hide");
            }

            return $q.reject(response);
        }
    };
})
.config(function ($httpProvider) {
    $httpProvider.interceptors.push('httpInterceptor');
});

Directive:

.directive("loader", function ($rootScope) {
    return function ($scope, element, attrs) {
        $scope.$on("loader_show", function () {
            return element.show();
        });
        return $scope.$on("loader_hide", function () {
            return element.hide();
        });
    };
}
)

CSS:

#loaderDiv {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1100;
   background-color: white;
   opacity: .6;
}

.ajax-loader {
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -32px; /* -1 * image width / 2 */
   margin-top: -32px; /* -1 * image height / 2 */
   display: block;
}

HTML:

<div id="loaderDiv" loader>
    <img src="src/assets/img/ajax_loader.gif" class="ajax-loader"/>
</div>

这篇关于使用 httpInterceptor 和 AngularJS 1.1.5 实现加载微调器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！