Comment AngularJS peut-il empêcher le scintillement des changements de route en retardant le chargement des données ?

Retarder le changement d'itinéraire AngularJS jusqu'au chargement des données pour éviter le scintillement

Dans AngularJS, un changement brusque d'itinéraire peut parfois provoquer un scintillement lors du chargement de la nouvelle page. Pour résoudre ce problème, nous pouvons retarder l'affichage du nouvel itinéraire jusqu'à ce que toutes les données nécessaires aient été récupérées.

Problème : Comment configurer AngularJS pour attendre que les modèles et les données soient complètement chargés avant d'afficher un nouvel itinéraire, similaire au fonctionnement de Gmail ?

Solution :

Pour éviter clignotant, AngularJS fournit la propriété de résolution dans les routes. En définissant une fonction de résolution, nous pouvons spécifier quelles dépendances doivent être résolues avant de procéder au changement d'itinéraire.

Considérons l'exemple suivant :

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;
  }
};

Dans cet exemple, nous définissons une fonction de résolution fonction pour PhoneListCtrl qui renvoie une promesse pour les données du téléphone. Une fois la promesse résolue, les données deviennent disponibles pour le contrôleur.

Configuration de l'itinéraire dans l'application AngularJS :

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

En utilisant la propriété solve, AngularJS retarde le changement d'itinéraire jusqu'à ce que le La promesse du téléphone est résolue, garantissant que les données sont chargées avant l'affichage de la nouvelle page. Cette approche évite tout scintillement lors de la transition de page.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!