How to handle loading in AngularJS?

Question

What modules / tips can be used to handle loading in AngularJS? Basically, how do you include a loading icon when a page is being loaded (for instance account settings of the user OR when the page is initially loaded)? Is there a standard procedure or ng- module?

Ps. If my question is too vague or inappropriate, please correct me. I do think that it has crossed the minds of most Angular beginners.

Answer 1

This is by far the easiest method of indicating one or multiple XHR requests in progress, if you're using a flavour of ui-routing, it'l also show you the HTML files being fetched in XHR requests.

http://chieffancypants.github.io/angular-loading-bar/

It's a bar that looks the same like the Youtube loading indicator, and it's easily style-able.

Just include the library as an ng-module, that's it.

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

You might want to disable either the circle or the bar itself(both at the same time might look a bit too much).

Answer 2

I found this answer to be very helpful, courtesy of Josh David Miller:

.controller('MainCtrl', function ( $scope, myService ) {
  $scope.loading = true;
  myService.get().then( function ( response ) {
    $scope.items = response.data;
  }, function ( response ) {
    // TODO: handle the error somehow
  }).finally(function() {
    // called no matter success or failure
    $scope.loading = false;
  });
});

---

<div class="spinner" ng-show="loading"></div>
<div ng-repeat="item in items>{{item.name}}</div>

Source: https://stackoverflow.com/a/15033322/4040107

Answer 3

had answered similar question earlier as well.... If you dont want to implement it yourself, below are few links.

angular-spinner or angular-sham-spinner

also read this BLOG which details how the spinner works with angularjs

if you want to implement it yourself... then

app.directive("spinner", function(){
return: {
restrict: 'E',
scope: {enable:"="},
template: <div class="spinner" ng-show="enable"><img src="content/spinner.gif"></div>
}
});

i havent tested the code but directive wont be more complex than this...