AngularJS loading progress bar

Bei der Verwendung von AngularJS und dabei eine Weiterleitung per $location.path('/path') die neue Seite dauert eine Weile zum laden, vor allem auf dem Handy.

Gibt es einen Weg, um einen Fortschrittsbalken für das laden? Vielleicht so etwas wie YouTube hat?

InformationsquelleAutor MB. | 2013-11-05

  1. 21

    Für ein progress-bar wie YouTube hat, können Sie einen Blick auf ngprogress. Dann eben nach der Konfiguration der app (zum Beispiel), können Sie abfangen von route events.

    Tun und etwas wie:

    app.run(function($rootScope, ngProgress) {
  $rootScope.$on('$routeChangeStart', function() {
    ngProgress.start();
  });

  $rootScope.$on('$routeChangeSuccess', function() {
    ngProgress.complete();
  });
  //Do the same with $routeChangeError
});
    Sie vergessen haben, injizieren ngProgress: .run(function($rootScope, ngProgress)
    N. b. diese Antwort gilt dann nicht mehr. Schauen @rsobon 's Antwort am Ende dieser Seite für eine aktuelle Umsetzung.

    InformationsquelleAutor Luc

  2. 5

    Da @Luc ' s anwser ngProgress ein wenig verändert, und jetzt können Sie Spritzen nur ngProgressFactory, die verwendet werden, um ngProgress Instanz. Auch im Gegensatz zu @Ketan Patil Antwort, Sie sollte nur instanziieren ngProgress einmal:

    angular.module('appRoutes', []).run(function ($rootScope, ngProgressFactory) { 

    //first create instance when app starts
    $rootScope.progressbar = ngProgressFactory.createInstance();

    $rootScope.$on("$routeChangeStart", function () {
        $rootScope.progressbar.start();
    });

    $rootScope.$on("$routeChangeSuccess", function () {
        $rootScope.progressbar.complete();
    });
});
    Ich danke Ihnen sehr!

    InformationsquelleAutor rsobon

  3. 0

    wenn es die nächste route, die Zeit braucht, um zu laden, z.B. die Bereitstellung von ajax-aufrufen, bevor die Steuerung ausgeführt wird (lösen config auf route), dann nutzen $route-service, der $routeChangeStart, $routeChangeSuccess und $routeChangeError Veranstaltungen.

    registrieren einer top-level-controller (außerhalb der ng-view), hört diese Veranstaltungen und verwaltet eine Boolesche variable in $scope.

    verwenden Sie diese variable mit ng-show overlay "wird geladen, bitte warten" - div.

    wenn die nächste route schnell lädt (d.h. der controller läuft schnell), aber die Daten, die angefordert werden durch den controller nehmen Sie eine lange, um zu laden, dann, fürchte ich, haben Sie zum verwalten der Sichtbarkeit Stand der Spinner in Ihren controller und view.

    etwas wie:

    $scope.data = null;
$http.get("/whatever").success(function(data) {
    $scope.data = data;
});

<div ng-show="data !== null">...</div>
<div ng-show="data === null" class="spinner"></div>

    InformationsquelleAutor Kos Prov

  4. 0

    verwenden Sie eckige-laden-bar

    Standalone-demo hier ..
    https://github.com/danday74/angular-loading-bar-standalone-demo

    InformationsquelleAutor danday74

  5. -1

    Hier ist eine funktionierende Lösung, die ich benutze in meiner Anwendung. ngProgress ist die beste Bibliothek für angezeigt Last-bars, bei änderung von urls.

    Erinnern zu injizieren, die ngProgressFactory statt ngProgress, im Gegensatz zu Luc Lösung.

    angular.module('appRoutes', []).run(function ($rootScope, ngProgressFactory) {
    $rootScope.$on("$routeChangeStart", function () {
        $rootScope.progressbar = ngProgressFactory.createInstance();
        $rootScope.progressbar.start();

    });

    $rootScope.$on("$routeChangeSuccess", function () {
        $rootScope.progressbar.complete();
    });
});

    Update-Nov-2015 - Nach der Analyse dieser Ansatz mit Chrom-timings, die ich beobachtet habe, dass dies nicht der richtige Weg für das hinzufügen von ein Ladebalken. Sicher, der Ladebalken wird sichtbar für die Besucher,aber es wird nicht in sync mit dem eigentlichen laden der Seite timings.

    InformationsquelleAutor Ketan Patil

Schreibe einen Kommentar