[AngularJS] Angular-Http-Loader sample

 AngularJS   angular-http-loader  

▌Background

---

I was looking for a solution for showing Loading-element after sending Http request and before receiving Http response.

Then I found angular-http-loader (by wongatech), which is an easy-to-use directive.

The document and demo on his blog is clear, so I will make a quick go-thru here.

▌Environment

---

l   Visual Studio 2015 Ent.

l   AngularJS 1.4.8

▌Implement

---

▋Install angular-http-loader

Use bower to install it.

bower install --save angular-http-loader

▋Javascript

Include angular-http-loader.min.js into the web page. Then open the javascript to use it.

var app = angular.module('app', ['ng.httpLoader']) .config([         'httpMethodInterceptorProvider',         function (httpMethodInterceptorProvider) {             httpMethodInterceptorProvider.whitelistDomain("http://localhost:12340/");             //httpMethodInterceptorProvider.whitelistLocalRequests();         } ]) .controller('CustomerIndexCtrl', function ($scope, $http, $q) {     //TODO : Implement the http methods… });

httpMethodInterceptorProvider.whitelistDomain("http://localhost:12340/")  :

===>  Add remote web server to the white list.

httpMethodInterceptorProvider.whitelistLocalRequests()

===>  Add local server to the white list.

▋Html

Put a div with the following directives:

1.  ng-http-loader

For all requests :

<div class="Loading" ng-http-loader template="XXX.html"></div>

Only Http GET :

<div class="Loading" ng-http-loader methods="GET" template="XXX.html"></div>

Http GET and POST

<div class="Loading" ng-http-loader methods="['GET','POST']" template="XXX.html"></div>

2.  ttl

Set the minimum time (seconds) for displaying the loading element.

3.  template

The loading element.

4.  title
Put a title on the template.

<script src="~/bower_components/angular-http-loader/app/package/js/angular-http-loader.min.js"></script> <div ng-app="app" ng-controller="CustomerIndexCtrl">     <div class="Loading" ng-http-loader methods="GET" ttl="5" title="Loading..." template="~/Html/Loading.html"></div>     <!—TODO : Implement the html content here --> </div>

▋Template Html

<span>{{title}}</span> <img src="../Content/images/gif/ajax-loader.gif" />

PS. You can generate a loading GIF on ajaxload!

▋Result

▌Reference

---

l   angular-http-loader (by wongatech)