2014-12-29 10 views
6

Mit welchen Modulen/Spitzen kann das Laden in AngularJS gehandhabt werden? Wie wird ein Ladesymbol beim Laden einer Seite eingefügt (z. B. Kontoeinstellungen des Benutzers ODER wenn die Seite zum ersten Mal geladen wird)? Gibt es eine Standardprozedur oder ein ng-Modul?Wie wird das Laden in AngularJS gehandhabt?

Ps. Wenn meine Frage zu vage oder unpassend ist, korrigiere mich bitte. Ich denke, dass es den meisten Anfängern der Angularität in den Sinn gekommen ist.

+1

Es gibt viele Module dafür. Bereits erwähnt in Antworten sind: Winkel-Lade-Bar, Winkel-Spinner, Winkel-Wham-Spinner. Außerdem gibt es ngProgress und ngProgressLite. – Martin

Antwort

6

Dies ist bei weitem die einfachste Methode, um eine oder mehrere XHR-Anforderungen anzuzeigen. Wenn Sie eine Art von UI-Routing verwenden, zeigt es Ihnen auch die HTML-Dateien, die in XHR-Anfragen abgerufen werden.

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

Es ist eine Bar, die die gleiche wie die Youtube Ladeanzeige, und es ist leicht Stil-Lage aussieht.

Fügen Sie einfach die Bibliothek als ng-Modul ein, das war's.

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

Sie könnten entweder den Kreis oder die Bar selbst deaktivieren möchten (beides zugleich vielleicht ein bisschen zu viel aussehen).

+0

Happy Fucking New Year Ich bin so betrunken – AMG

5

ich diese Antwort gefunden sehr hilfreich zu sein, mit freundlicher Genehmigung von 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> 

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

+0

Tolles Konzept. Beinhaltet die myService.get(). Then (...) immer eine $ http get Anfrage oder kann es etwas anderes sein? Zum Beispiel, wenn ich eine benutzerdefinierte Service-Funktion .getSomethingElse() habe, kann ich es dann auch mit .then (...) folgen - Ich wiederhole, dass ich in der Vergangenheit Schwierigkeiten damit hatte. – AMG

+0

Versuchen Sie, .getSomethingElse() in einer Variablen aufzurufen, und verwenden Sie dann then() mit der Variablen. Folgendes kann in den Angular-Dokumenten hilfreich sein: https://docs.angularjs.org/api/ng/service/$q –

3

auch früher ähnliche Frage beantwortet hatte ... Wenn Sie es nicht selbst implementieren möchten, finden Sie nachfolgend einige Links.

angular-spinner oder angular-sham-spinner

auch diese BLOG lesen, die Details, wie die Spinner arbeitet mit AngularJS

wenn Sie es selbst umsetzen wollen ... dann

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

ich den Code getestet haben Aber die Anweisung wird nicht komplexer sein als das ...

Verwandte Themen