`
Notebookdong
  • 浏览: 122301 次
社区版块
存档分类
最新评论

angular http请求加上overlay

阅读更多
module.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.interceptors.push(function ($q, $rootScope) {
        if ($rootScope.activeCalls == undefined) {
            $rootScope.activeCalls = 0;
        }

        return {
            request: function (config) {
                $rootScope.activeCalls += 1;
                return config;
            },
            requestError: function (rejection) {
                $rootScope.activeCalls -= 1;
                return rejection;
            },
            response: function (response) {
                $rootScope.activeCalls -= 1;
                return response;
            },
            responseError: function (rejection) {
                $rootScope.activeCalls -= 1;
                return rejection;
            }
        };
    });
}]);

module.directive('loadingSpinner', function ($http) {
    return {
        restrict: 'A',
        replace: true,
        template: '<div class="loader unixloader" data-initialize="loader" data-delay="500"></div>',
        link: function (scope, element, attrs) {

            scope.$watch('activeCalls', function (newVal, oldVal) {
                if (newVal == 0) {
                    $(element).hide();
                }
                else {
                    $(element).show();
                }
            });
        }
    };
});

 原文:http://stackoverflow.com/questions/17144180/angularjs-loading-screen-on-ajax-request?answertab=votes#tab-top

分享到:
评论

相关推荐

    angular http请求工具类

    在Angular框架中,HTTP请求是应用与服务器交互的重要方式,用于获取或发送数据。这个"angular http请求工具类"很可能是开发人员为了简化HTTP请求操作而创建的一个自定义服务。通常,这样的工具类会封装Angular内置的...

    Angular4 Http

    在Angular4中,HTTP模块是与服务器进行数据交互的核心组件,它允许我们发送HTTP请求并处理响应。本篇文章将深入探讨Angular4中的HTTP模块,包括其基本用法、配置和最佳实践。 ### 1. 引入HTTP模块 首先,我们需要...

    angular-treasure-overlay-spinner:绑定为真时,向元素添加微调器

    bower install angular-treasure-overlay-spinner 将angular-treasure-overlay-spinner/src/treasure-overlay-spinner.js到您的html中 将angular-treasure-overlay-spinner/src/treasure-overlay-spinner.css到您的...

    Angular网络请求的封装方法

    Angular网络请求的封装方法 Angular是一款流行的前端框架,它提供了强大的网络请求功能,但是默认的网络请求方式可能不是最优雅的。因此,本文将介绍Angular网络请求的封装方法,帮助开发者更好地管理网络请求。 ...

    Angular中的数据请求 内置模块HttpClient实现(get post jsonp 以及第三方模板axios请求数据示例代码.zip

    内置的HttpClient模块是Angular提供的一种高效、强大的HTTP客户端工具,用于处理网络请求。本篇将详细介绍HttpClient模块的使用,包括GET、POST、JSONP方法,以及如何引入并使用第三方库axios进行数据请求。 首先,...

    Angular 数据请求的实现方法

    使用 Angular 请求数据的时候,需要引入 HttpModule 模块,如果使用的 jsonp 模式的话,则需要另外引入 JsonpModule 模块 import { HttpModule, JsonpModule } from '@angular/http' 然后在当前模块中的 imports 内...

    Angular6封装http请求的步骤详解

    Angular6封装http请求主要包括理解Angular中的HttpClient模块以及如何通过拦截器(HttpInterceptor)来封装和增强http请求功能。 首先,Angular中的HttpClient模块是一个用于发送HTTP请求的库,它提供了一个更加...

    angular2中Http请求原理与用法详解

    Angular2中HTTP请求原理与用法详解涵盖了Angular2环境下进行网络请求的核心知识点。Angular2是一个用于构建客户端应用程序的平台,它是AngularJS的后继版本,提供了更加模块化和高性能的解决方案。在Angular2中,...

    Angularjs2 http请求

    **AngularJS 2 HTTP 请求详解** AngularJS 2(现为Angular 2+,因为后续版本已不再使用版本号命名)是Google推出的一款强大的前端框架,用于构建动态、响应式的Web应用。它的一个核心特性是提供了对服务器数据的...

    Angular中的数据请求 内置模块HttpClient实现(get post jsonp 以及第三方模板axios请求数据

    内置的HttpClient模块是Angular处理网络请求的主要工具,它提供了强大的功能,包括GET、POST、JSONP等HTTP方法,以及与第三方库如axios的集成。本文将深入探讨HttpClient的使用及其在Angular中的实践。 首先,...

    详解如何在Angular优雅编写HTTP请求

    在Angular中优雅编写HTTP请求是前端开发中的一项基础技能,其涉及到如何与后端服务进行有效的数据交互。本知识点将详细介绍如何在Angular项目中优雅地编写HTTP请求,并结合RESTful API设计原则,实现前后端的有效...

    Angular的$http的ajax的请求操作(推荐)

    在本文中,我们将深入探讨Angular的$http服务,以及如何使用它来进行GET和POST请求。 首先,Angular的$http服务通过其方法封装了传统的Ajax操作,如jQuery的$.ajax。这使得开发者可以避免直接处理底层的...

    Angular4使用GET请求向后台获取数据

    首先,Angular4提供了HttpClient模块,它是Angular内置的服务,用于发送HTTP请求。在项目中,你需要导入HttpClient模块,并在你的服务或者组件中注入它来发起HTTP请求。例如,在你的`app.module.ts`中: ```...

    Angular异步变同步处理方法

    Angular异步变同步处理方法是前端开发中用于解决多个接口请求顺序依赖问题的一种技术手段。由于异步操作的特性,它能处理那些按顺序依次执行的接口调用,而不会阻塞主线程,让页面陷入假死状态。在Angular中,主要...

    Angular5 HttpService

    4. **添加拦截器**: Angular允许我们添加拦截器(Interceptor)来处理请求和响应,如添加统一的Header、错误处理等。创建一个拦截器类,然后在AppModule中注册。 5. **错误处理**: 使用Observables的catchError操作...

    angular1封装$http

    在AngularJS 1.x(通常称为Angular 1)中,`$http`服务是核心模块提供的一个关键组件,用于与服务器进行异步数据交互,如发送HTTP请求和接收响应。这个服务极大地简化了Web应用中的AJAX操作。下面将详细讨论如何在...

    Angular 股票管理

    通常,前端通过HTTP请求与后端API交互,如使用Angular的HttpClient模块发送GET请求获取股票列表。 6. 表单处理: Angular官方文档中的表单部分介绍了如何创建和管理表单,包括模板驱动表单(Template-driven forms...

    Angular服务Request异步请求的实例讲解

    首先,异步请求在JavaScript中通常通过Ajax实现,Angular通过其内置的$http服务提供了对Ajax操作的封装。在示例中,`request`对象模拟了Angular的服务行为,它包含一个`post`方法,该方法内部定义了错误回调`...

    在 Angular6 中使用 HTTP 请求服务端数据的步骤详解

    import {HttpClientModule} from @angular/common/http; //引入HttpClientModule 模块 imports: [ BrowserModule, AppRoutingModule, HttpClientModule //声明HTTP模块 ], 第三步 在组件中使用HTTP模块向远程服务

Global site tag (gtag.js) - Google Analytics