Come gestire il caricamento in AngularJS?

Question

Quali moduli/suggerimenti possono essere utilizzati per gestire il caricamento in AngularJS? In sostanza, come si include un'icona di caricamento quando viene caricata una pagina (ad esempio, le impostazioni dell'account dell'utente O quando la pagina viene caricata inizialmente)? Esiste una procedura standard o un modulo ng?

Ps. Se la mia domanda è troppo vaga o inappropriata, correggimi. Penso che abbia attraversato le menti di molti principianti angolari.

Answer 1

Questo è di gran lunga il metodo più semplice per indicare una o più richieste XHR in corso, se si utilizza un aroma di instradamento u-ro, è anche possibile visualizzare i file HTML che vengono recuperati nelle richieste XHR.

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

E 'un bar che sembra la stessa come l'indicatore di caricamento Youtube, ed è facilmente stile-grado.

Basta includere la libreria come modulo ng, il gioco è fatto.

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

Si potrebbe voler disabilitare il cerchio o la barra stessa (entrambi allo stesso tempo potrebbero sembrare un po 'troppo).

Answer 2

ho trovato questa risposta per essere molto utile, per gentile concessione di 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> 

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

Answer 3

aveva risposto alla domanda simile in precedenza, nonché ... Se non si desidera implementarlo da soli, di seguito sono riportati alcuni collegamenti.

angular-spinner o angular-sham-spinner

leggere anche questo BLOG che dettaglia come il filatore lavora con angularjs

se si desidera implementare da soli ... poi

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

i havent provato il codice ma la direttiva non sarà più complessa di questa ...