In previous we have learn how to add ajax loading image/text on processing of Ajax request, here i am taking one step ahead and adding same functionality for angular application using AngularJS.
Angular is popular and powerful tool for frontend UI which has predefined directive that will help to improve you HTML page performance. We are using ngshow directive for show and hide image.
Option 1 :
There are following Steps to add Loading spinner on page using without any plugin.
Step 1: Defined a variable $scope.loader = true; in starting service function.
Step 2: Added html on dashboard template
1 |
<div ng-show='loader'><img ng-src="img/loading.gif" class="loader"></div>
|
Step 3: Added ng-show on target div(where data will load).
1 |
<div ng-show='!tempLoader'></div>
|
Step 4: Hide loader on service finally callback method.
.finally(function() { // called no matter success or failure
$scope.tempLoader = false;
});
Option 2 :
Spinner using Angular directive
Angular directive for ajax loading indicator. This directive uses .Detects any ajax request and shows the spinner.