Wie kann man das Flackern von AngularJS-Routenänderungen verhindern, indem man verzögert, bis das Modell geladen wird?

AngularJS-Routenänderung verzögern, bis das Modell geladen ist, um Flimmern zu verhindern

AngularJS bietet eine praktische Möglichkeit, das Routing in Webanwendungen zu verwalten. Es gibt jedoch Szenarien, in denen Sie möglicherweise die Anzeige einer neuen Route verzögern möchten, bis die entsprechenden Modelle und Daten vom Server geladen wurden. Dies kann nützlich sein, um ein Flackern oder die Anzeige leerer Seiten während des Datenabrufs zu verhindern.

Die Eigenschaft $routeProvider.Resolve

Die Eigenschaft $routeProvider.resolve ermöglicht Ihnen um Abhängigkeiten anzugeben, die aufgelöst werden müssen, bevor eine Routenänderung erfolgen kann. Dies bedeutet, dass die Routenänderung verzögert wird, bis diese Abhängigkeiten erfüllt sind.

Definieren einer Route mit Resolve

Um eine Route zu definieren, die die Routenänderung verzögert, bis die Nachdem das Modell geladen wurde, geben Sie einfach die Auflösungseigenschaft in der Routenkonfiguration an. Zum Beispiel:

$routeProvider.when('/projects', {
  templateUrl: 'partials/project-list.html',
  controller: PhoneListCtrl,
  resolve: PhoneListCtrl.resolve
});

Implementieren der Resolve-Funktion

Die Resolve-Funktion ist für die Rückgabe eines Versprechens verantwortlich. Die Routenänderung wird erst durchgeführt, wenn dieses Versprechen gelöst ist. Hier ist ein Beispiel für eine Auflösungsfunktion, die mithilfe des $resource-Dienstes eine Liste von Projekten abruft:

PhoneListCtrl.resolve = {
  phones: function (Phone, $q) {
    // Create a deferred object to resolve the promise later
    var deferred = $q.defer();

    // Fetch the projects using $resource and resolve the promise when successful
    Phone.query(function (successData) {
      deferred.resolve(successData);
    }, function (errorData) {
      deferred.reject(); // Optionally pass error data here
    });

    // Return the promise
    return deferred.promise;
  },
  // For demonstration purposes, add a delay to the resolve
  delay: function ($q, $defer) {
    var delay = $q.defer();
    $defer(delay.resolve, 1000);
    return delay.promise;
  }
};

Sobald die Auflösungsfunktion abgeschlossen ist, kann der entsprechende Controller auf die aufgelösten Daten zugreifen, z. B. auf die Liste von Projekte.

Flimmern beim Laden von Daten verhindern

Während die Daten geladen werden, können Sie dies verhindern flackert, indem die aktuelle Seite weiterhin angezeigt wird. Dies kann erreicht werden, indem die ng-switch-Direktive verwendet wird, um den Ladezustand oder die geladenen Daten bedingt anzuzeigen.

Demo- und Quellcode

Für ein funktionierendes Beispiel und eine Quelle Code finden Sie unter:

• Demo: http://mhevery.github.com/angular-phonecat/app/#/phones
• Quelle: https://github.com/mhevery/angular-phonecat/commit/ba33d3ec2d01b70eb5d3d531619bf90153496831

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