Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script>
<div ng-controller="MainController">
<ul>
<li ng-repeat="text in texts">{{text.data}}</li>
</ul>
<button ng-click="buttonClick()">Load a new delayed text</button>
<div class="loading-widget">Loading...</div>
<div>Pending requests: {{count()}}</div>
</div>
JavaScript
angular.module('myApp', [
'myApp.services',
'myApp.directives',
'myApp.controllers'])
.config(function (
$httpProvider,
requestNotificationProvider) {
$httpProvider.interceptors.push(function ($q) {
return {
request: function (config) {
requestNotificationProvider.fireRequestStarted();
return config;
},
response: function (response) {
requestNotificationProvider.fireRequestEnded();
return response;
},
responseError: function (rejection)
{
requestNotificationProvider.fireRequestEnded();
return $q.reject(rejection);
}
}
});
});
angular.module('myApp.controllers', []).controller("MainController", function ($scope, $http, requestNotification) {
$scope.texts = [];
$scope.count = requestNotification.getRequestCount;
$scope.buttonClick = function () {
$http.get("http://slowapi.com/delay/1.0").then(function (response) {
$scope.texts.push(response);
}, function (response) {
var d = new Date();
$scope.texts.push({
data: "Request failed!"
});
});
};
});
angular.module('myApp.services', []).provider(
'requestNotification', function () {
// This is where we keep subscribed listeners
var onRequestStartedListeners = [];
var onRequestEndedListeners = [];
// This is a utility to easily increment the request count
var count = 0;
var requestCounter = {
increment: function () {
count++;
},
decrement: function () {
if (count > 0) count--;
},
getCount: function () {
return count;
}
};
// Subscribe to be notified when request starts
this.subscribeOnRequestStarted = function (listener) {
onRequestStartedListeners.push(listener);
...