javascript - How to handle loading in AngularJS? - Stack Overflow

admin管理员组

文章数量:1293110

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.

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.

• javascript
• angularjs
• loading

Share Improve this question Follow asked Dec 29, 2014 at 23:30 AMGAMG 70411 gold badge88 silver badges2020 bronze badges 1

• 1 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 Commented Dec 31, 2014 at 13:18

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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).

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./a/15033322/4040107

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 plex than this...

本文标签： javascriptHow to handle loading in AngularJSStack Overflow