HTTP Loader

Angular component which monitors HTTP requests and shows a custom loader element when calls start and hides it when they complete.

Maintainer: Mauro Gadaleta <mauro.gadaleta@wonga.com>

Demo

http://wongatech.github.io/angular-http-loader/

Travis Status

Installation

Bower:

bower install --save angular-http-loader

Usage

Load angular-http-loader.min.js:

<script src="path/to/angular-http-loader.min.js"></script>

Add the ng.httpLoader module as a dependency in your application:

angular.module('demo', ['ng.httpLoader'])

Whitelists a specified url. This is mainly used to identify Ajax requests. Most JavaScript frameworks send this field with the value of XMLHttpRequest:

.config([
  'httpMethodInterceptorProvider',
  function (httpMethodInterceptorProvider) {
    httpMethodInterceptorProvider.requestConfig({ 
      url: '/allowed/url',
      headerName: 'X-Requested-With',
      requestType: 'XMLHttpRequest'
    });
    // ...
  }
])

Add an HTML element with the ng-http-loader directive. This will be displayed while requests are pending:

<div ng-http-loader template="example/loader.tpl.html"></div>

Different loaders for different methods

Monitor only GET requests:

<div ng-http-loader methods="GET" template="example/loader.tpl.html"></div>

Monitor POST and PUT requests:

<div ng-http-loader methods="['POST', 'PUT']" template="example/loader.tpl.html"></div>

Adding a title to your template

HTTP loader allows you to pass a title to your template:

<div ng-http-loader title="example" methods="GET" template="example/loader.tpl.html"></div>

And use that in your template:

<span>Loader for {{title}}</span>

Minimum time to live

HTTP loader allows you to pass a ttl in seconds to your template. This tells the loader to be visible at least for the given amount of time, i.e.

<div ng-http-loader ttl="2" methods="GET" template="example/loader.tpl.html"></div>

The loader should be now visible at least 2 seconds, independent of the total http request(s) dispatched. Should the total amount of time of the request(s) be larger than the ttl, the loader will dismiss when the last http request is done.

Contributing

We ❤️ pull requests!

To contribute:

• Fork the repo
• Run npm install
• Run bower install
• Run grunt workflow:dev to watch for changes, lint, build and run tests as you're working
• Write your unit tests for your change
• Run grunt package to update the distribution files
• Check that the demo app works (acceptance tests to be added)
• Update README.md and, if necessary, the demo page