Loading Image For Every HTTP Service Call In AngularJS

Vivek Kumar
7y
3k
0
4
25
Blog

Whenever we use an HTTP call in AngularJS, we want to show the loading image by default. So here, we are going to see the process with a sample example.

Below is the complete code for index.html, script.js, and studentData.json page.

Complete code for HTML

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<h1>Loading spinner</h1>
<div data-loading> </div>
<div>
<ul ng-repeat="student in students">
<li>{{student.name}}</li>
</ul>
</div>
<button ng-click="loadData()" class="btn btn-primary">Click for Load data</button>
</body>
</html>

Complete code for JavaScript

angular.module('myApp', [])
.directive('loading', ['$http' ,function ($http)
{
return {
restrict: 'A',
template: '<div class="loading-spiner"><img src="http://www.nasa.gov/multimedia/videogallery/ajax-loader.gif" /> </div>',
link: function (scope, elm, attrs)
{
scope.isLoading = function () {
return $http.pendingRequests.length > 0;
};
scope.$watch(scope.isLoading, function (v)
{
if(v){
elm.show();
}else{
elm.hide();
}
});
}
};
}])
.controller('myController', function($scope, $http) {
$scope.loadData = function() {
$scope.students = [];
$http.get('studentData.json')
.success(function(data) {
$scope.students = data[0].students;
});
}
});