Comment puis-je empêcher le scintillement pendant les transitions de route AngularJS lors de la récupération de données ?

Retarder le changement d'itinéraire AngularJS pour la récupération de données

AngularJS propose une solution pour éviter le scintillement pendant les transitions d'itinéraire lorsque les modèles nécessitent une récupération de données. Cette technique, analogue au comportement de Gmail, permet de retarder l'affichage d'un nouvel itinéraire jusqu'à ce que les données du modèle nécessaires aient été récupérées.

Propriété Resolve de $routeProvider

La clé La fonctionnalité permettant de retarder les changements d'itinéraire est la propriété de résolution associée à $routeProvider. En définissant un itinéraire avec un attribut de résolution, vous spécifiez que les données doivent être récupérées avant que l'itinéraire puisse effectuer une transition.

Exemple

Considérez l'exemple suivant :

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

L'attribut solve fait référence à un objet dans lequel vous définissez des fonctions pour récupérer les données. Par exemple :

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

Promesses différées

Les promesses sont utilisées pour représenter le processus de récupération de données asynchrone. Chaque fonction de résolution renvoie une promesse et AngularJS collecte toutes ces promesses. Le changement d'itinéraire est retardé jusqu'à ce que toutes les promesses soient résolues, garantissant ainsi que les données sont prêtes avant d'afficher la nouvelle vue.

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!