How to implement spinner loanding in Angularjs?

Question

I’m trying to implement spinner loanding in my project in Engineering, it’s been a while! the spinner should run whenever a request is executed.

What library do I use?

Answer 1

You can use it this way, it will only appear while $scope.loading for true.

app.controller('myCtrl', function ($scope, $http) {  
  // Show loading spinner.
  $scope.loading = true;
  $http.get('/some/awesome/content')
    .success(function (data) {
      // Do stuff with data.
    })
    .catch(function (err) {
      // Log error somehow.
    })
    .finally(function () {
      // Hide loading spinner whether our call succeeded or failed.
      $scope.loading = false;
    });
});

<div ng-controller="myCtrl">  
  <img id="mySpinner" src="/my/loading/spinner.gif" ng-show="loading" />
</div>  

Or to get better yet, you can create a directive, like this:

.directive('loading', function () {
      return {
        restrict: 'E',
        replace:true,
        template: '<div class="loading"><img src="..."/>LOADING...</div>',
        link: function (scope, element, attr) {
              scope.$watch('loading', function (val) {
                  if (val)
                      $(element).show();
                  else
                      $(element).hide();
              });
        }
      }
  })

Every time you set $scope.login = true; Somewhere, there will appear the Oader.

Answer 2

You may be using this module angular-loading-bar it is very easy to implement and modify. It certainly meets your need.

It works as follows, all service requisition $http it will "capture" and will inject into your code a progress bar and also in the bottom right a loading.

In the project’s own github there is documentation on how to implement.

First step to using it is to put your dependency

angular.module('myApp', ['angular-loading-bar'])

And also don’t forget to put your files in the project

<link rel='stylesheet' href='build/loading-bar.min.css' type='text/css' media='all' />
<script type='text/javascript' src='build/loading-bar.min.js'></script>

Once this is done any request will be activated.

Jsfiddle Demo

Answer 3

There are some ways. If you want to show the spinner whenever Angular requests, implement an Interceptor Factory, as in the answer accept this question in the English OS:

https://stackoverflow.com/questions/17838708/implementing-loading-spinner-using-httpinterceptor-and-angularjs-1-1-5

This Interceptor will be executed whenever a request to the $http service is made. The key is this line here:

$httpProvider.interceptors.push('httpInterceptor');

That injects the Interceptor into the Prior.