Comment puis-je empêcher le scintillement de la route dans AngularJS en attendant les données ?

Bloquer les modifications de route AngularJS jusqu'à la fin du chargement des données

Dans AngularJS, les transitions de route peuvent parfois provoquer un scintillement ou des artefacts visuels lorsque les données ne sont pas complètement chargées avant que le nouvel itinéraire ne soit affiché. Pour atténuer ce problème, il est possible de retarder les changements d'itinéraire jusqu'à ce que toutes les données nécessaires aient été récupérées et traitées.

Résoudre les promesses avec $routeProvider

Le $routeProvider dans AngularJS vous permet de résoudre les dépendances de données avant qu'un changement d'itinéraire puisse se produire. En fournissant une propriété de résolution dans la configuration de la route, vous pouvez définir une fonction qui renvoie une promesse. Le changement d'itinéraire sera retardé jusqu'à ce que toutes les promesses associées à l'itinéraire aient été résolues.

Exemple pour un ProjectsController

Considérez la définition d'itinéraire suivante pour un ProjectsController :

angular.module('app').config(['$routeProvider', function ($routeProvider) {
  $routeProvider.when('/projects', {
    templateUrl: 'projects/index.html',
    controller: 'ProjectsController',
    resolve: {
      projects: function (ProjectService) {
        // Function to fetch project data
        return ProjectService.query();
      },
      delay: function ($q, $defer) {
        // Function to add a delay for demonstration purposes
        let delay = $q.defer();
        $defer(delay.resolve, 1000);
        return delay.promise;
      }
    }
  });
}]);

Dans cet exemple, l'objet de résolution définit deux fonctions :

• projets :Cette fonction renvoie une promesse qui récupère tous les projets du backend à l'aide de ProjectService.
• délai : Cette fonction ajoute un délai de 1000 millisecondes pour la démonstration fins.

Conclusion

En utilisant la propriété de résolution dans $routeProvider, les applications AngularJS peuvent empêcher efficacement le scintillement de l'itinéraire en garantissant que toutes les dépendances de données sont satisfaites avant la transition. vers un nouvel itinéraire. Cette technique améliore considérablement l'expérience utilisateur en offrant une expérience de navigation fluide et sans scintillement.

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!