Wie kann ich beim Abrufen von Daten ein Flackern bei AngularJS-Routenübergängen verhindern?

Verzögern von AngularJS-Routenänderungen für den Datenabruf

AngularJS bietet eine Lösung, um Flackern bei Routenübergängen zu verhindern, wenn Modelle einen Datenabruf erfordern. Diese Technik, analog zum Verhalten von Gmail, ermöglicht es Ihnen, die Anzeige einer neuen Route zu verzögern, bis die erforderlichen Modelldaten abgerufen wurden.

Resolve-Eigenschaft von $routeProvider

Der Schlüssel Eine Funktion zum Verzögern von Routenänderungen ist die mit $routeProvider verknüpfte Auflösungseigenschaft. Indem Sie eine Route mit einem Auflösungsattribut definieren, geben Sie an, dass Daten abgerufen werden müssen, bevor die Route übergehen kann.

Beispiel

Betrachten Sie das folgende Beispiel:

// Define a route with a resolve property
$routeProvider.when('/phones', {
    templateUrl: 'partials/phone-list.html', 
    controller: PhoneListCtrl, 
    resolve: PhoneListCtrl.resolve
});

Das Auflösungsattribut bezieht sich auf ein Objekt, in dem Sie Funktionen zum Abrufen der Daten definieren. Zum Beispiel:

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

PhoneListCtrl.resolve = {
    phones: function(Phone, $q) {
        // Deferred object for promise handling
        var deferred = $q.defer();
        
        // Fetch data via Phone service
        Phone.query(function(successData) {
            deferred.resolve(successData); 
        }, function(errorData) {
            deferred.reject(); // Optionally handle errors
        });
        
        return deferred.promise;
    }
}

Deferred Promises

Promises werden verwendet, um den asynchronen Datenabrufprozess darzustellen. Jede Auflösungsfunktion gibt ein Versprechen zurück und AngularJS sammelt alle diese Versprechen. Die Routenänderung wird verzögert, bis alle Versprechen erfüllt sind. Dadurch wird sichergestellt, dass die Daten bereit sind, bevor die neue Ansicht angezeigt wird.

Das obige ist der detaillierte Inhalt vonWie kann ich beim Abrufen von Daten ein Flackern bei AngularJS-Routenübergängen verhindern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!