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.

There are many modules for this. Already mentioned in answers are: angular-loading-bar, angular-spinner, angular-wham-spinner. As well there is ngProgress and ngProgressLite. — Martin, Dec 31 '14 at 13:18

Rohan · Accepted Answer · 2014-12-29T23:46:09.173

6

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

edited Dec 29 '14 at 23:46

answered Dec 29 '14 at 23:39

Rohan

8,006
5
24
32

Happy fcking new year I am so drunk – AMG Jan 01 '15 at 10:10

score 5 · Answer 2 · edited May 23 '17 at 12:24

5

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

edited May 23 '17 at 12:24

Community

1
1

answered Dec 29 '14 at 23:53

Nick Mandel

311
3
8

Great concept. Does the myService.get().then(...) always include a $http get request or can it be anything else? For example, if I have a custom service function .getSomethingElse() can I follow it then also up with .then(...) - I recap that I had difficulties with it in the past. – AMG Dec 30 '14 at 05:24
Try calling .getSomethingElse() in a variable, then using then() with the variable. The following may be helpful in the Angular docs: https://docs.angularjs.org/api/ng/service/$q – Nick Mandel Dec 30 '14 at 17:27

score 3 · Answer 3 · answered Dec 31 '14 at 13:09

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

How to handle loading in AngularJS?

3 Answers3