Angular Loading spinner or Preloading image with finally

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.

You can also check other tutorial of angular,

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

Select Code
<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).

Select Code
<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.

Download Angular Loading Spinner