How to handle loading in AngularJS?

Question

What modules / tips can be used to handle loading in AngularJS? Basically, how do you turn on the download icon when the page loads (for example, user account settings or when the page is loaded initially)? Is there a standard procedure or ng module?

Ps. If my question is too vague or unlocal, please correct me. I really think he crossed the mind of most Angular beginners.

Answer 1

This is the easiest way to specify one or more XHR requests, if you use the ui-routing flavor, it will also show you the HTML files received in the XHR requests.

http://chieffancypants.imtqy.com/angular-loading-bar/

This is a panel that looks just like the Youtube download indicator and is easy to erase.

Just include the library as an ng module to have it.

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

You can disable either the circle or the panel (both may look too much at the same time).

Answer 2

I found this answer very useful, kindly provided by 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: fooobar.com/questions/29966 / ...

Answer 3

answered a similar question before. If you do not want to implement it yourself, here are a few links.

angular-spinner or angular-sham-spinner

also read this BLOG , which describes in detail how the counter works with angular

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 have not tested the code, but the directive will not be more complicated than this ...