Introduction
In this article lets add a spinner control to show the loading of data in our AngularJS application.
I will use the same sample Web API service created in my
previous article.
Practical Approach
As i said i am going to use the same Web API service and below is the project structure of AngularJS application -
Nothing fancy. It has the basic structure of AngularJS application. Now lets go through each file here in the solution -
I have a root file - "Index.html" which is my parent page and
<!doctype html>
<html>
<head>
<title> Spinner Example </title>
</head>
<body ng-app="myApp">
<div class="page-content">
<div class="row">
<div class="col-md-2">
<div class="sidebar content-box" style="display: block;">
<ul class="nav">
<!-- Main menu -->
<li><a href="#/SpinnerExample"<i class="glyphicon glyphicon-home"></i> Spinner Example</a></li>
</ul>
</div>
</div>
<div class="col-md-10">
<div class="content-box-header panel-heading">
<div class="panel-title">Sample Spinner Example</div>
</div>
<div class="row">
<div class="col-md-12 panel-info">
<div class="content-box-large box-with-header">
<div ng-view></div>
</div>
</div>
</div>
</div>
</div>
</div>
<span us-spinner="{radius:30, width:8, length: 16}"></span>
<!-- Libaries for Bootstrap for controls -->
<!--Starts Here-->
<link href="scripts/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="scripts/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" />
<script type="text/javascript" src="scripts/bootstrap/js/bootstrap.min.js"></script>
<!--Ends Here-->
<script type="text/javascript" src="scripts/angular.min.js"></script>
<script type="text/javascript" src="scripts/angular-route.js"></script>
<link href="css/styles.css" rel="stylesheet" />
<!-- Libaries for Spinner-->
<!--Starts Here-->
<script type="text/javascript" src="scripts/spinner/spin.min.js"></script>
<script type="text/javascript" src="scripts/spinner/angular-spinner.min.js"></script>
<script type="text/javascript" src="scripts/spinner/angular-loading-spinner.js"></script>
<!--Ends Here-->
<script src="app.js"></script>
<script src="config.js"></script>
<script src="services/sampleService.js"></script>
<script src="controllers/sampleController.js"></script>
</body>
</html>
This file has all relevant file paths like - controllers, scripts and services, which are required for this demo and observe the line required for spinner control is highlighted along with spinner scripts.
For demonstration purpose i have created a service - "sampleService.js", which will call the Web API
service to get the data.
myApp.service('sampleService', function ($http) {
this.getProducts = function () {
return $http.get('http://localhost:53308/api/Product/');
}
});
And controller which uses the above service -
myApp.controller('sampleCtrl', ['$scope', '$http', 'sampleService', function ($scope, $http, sampleService) {
var products = sampleService.getProducts();
products.then(function (response) {
//once the process data
});
}]);
As can be seen in the above code, when the data process is completed spinner is hidden and if there is a pending http request then the spinner is shown as per the below line of code in "index.html" -
<span us-spinner="{radius:30, width:8, length: 16}"></span>
Below is the directive is used for spinner -
(function () {
angular.module('ngLoadingSpinner', ['angularSpinner'])
.directive('usSpinner', ['$http', '$rootScope', function ($http, $rootScope) {
return {
link: function (scope, elm, attrs) {
debugger;
$rootScope.spinnerActive = false;
scope.isLoading = function () {
return $http.pendingRequests.length > 0;
};
scope.$watch(scope.isLoading, function (loading) {
$rootScope.spinnerActive = loading;
if (loading) {
elm.removeClass('ng-hide');
} else {
elm.addClass('ng-hide');
}
});
}
};
}]);
}).call(this);
Below is the screenshot of the spinner in the page -
and Plunker working demo -
http://plnkr.co/edit/2bkqH67BURHqPHvXFpQT?p=preview
Hope this helps.
