Wie kann AngularJS das Flackern von Routenänderungen verhindern, indem es verzögert, bis die Daten geladen werden?

Verzögern der AngularJS-Routenänderung bis zum Laden der Daten, um Flimmern zu verhindern

In AngularJS können abrupte Routenänderungen manchmal zu einem Flackern führen, wenn die neue Seite geladen wird. Um dieses Problem zu beheben, können wir die Anzeige der neuen Route verzögern, bis alle erforderlichen Daten abgerufen wurden.

Problem: Wie kann AngularJS so konfiguriert werden, dass es vor der Anzeige wartet, bis Modelle und Daten vollständig geladen sind? eine neue Route, ähnlich der Funktionsweise von Gmail?

Lösung:

Um Flackern zu verhindern, AngularJS stellt die Auflösungseigenschaft innerhalb von Routen bereit. Durch die Definition einer Auflösungsfunktion können wir angeben, welche Abhängigkeiten aufgelöst werden müssen, bevor wir mit der Routenänderung fortfahren.

Betrachten Sie das folgende Beispiel:

function PhoneListCtrl($scope, phones) {
  $scope.phones = phones;
  $scope.orderProp = 'age';
}

PhoneListCtrl.resolve = {
  phones: function(Phone, $q) {
    var deferred = $q.defer();
    Phone.query(function(successData) {
      deferred.resolve(successData);
    }, function(errorData) {
      deferred.reject();
    });
    return deferred.promise;
  }
};

In diesem Beispiel definieren wir eine Auflösung Funktion für PhoneListCtrl, die ein Versprechen für die Telefondaten zurückgibt. Sobald das Versprechen gelöst ist, stehen die Daten dem Controller zur Verfügung.

Konfigurieren der Route in der AngularJS-Anwendung:

angular.module('phonecat').config(['$routeProvider', function($routeProvider) {
  $routeProvider.
    when('/phones', {
      templateUrl: 'partials/phone-list.html',
      controller: PhoneListCtrl,
      resolve: PhoneListCtrl.resolve
    });
}]);

Durch die Verwendung der Resolve-Eigenschaft verzögert AngularJS die Routenänderung bis zum Das Telefonversprechen wird gelöst und sichergestellt, dass die Daten geladen werden, bevor die neue Seite angezeigt wird. Dieser Ansatz verhindert ein Flackern während des Seitenübergangs.

Das obige ist der detaillierte Inhalt vonWie kann AngularJS das Flackern von Routenänderungen verhindern, indem es verzögert, bis die Daten geladen werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!