Comment empêcher le scintillement des changements de route AngularJS en retardant le chargement du modèle ?

Retarder le changement de route AngularJS jusqu'au chargement du modèle pour éviter le scintillement

AngularJS fournit un moyen pratique de gérer le routage dans les applications Web. Cependant, il existe des scénarios dans lesquels vous souhaiterez peut-être retarder l'affichage d'un nouvel itinéraire jusqu'à ce que les modèles et les données correspondants aient été chargés depuis le serveur. Cela peut être utile pour éviter le scintillement ou l'affichage de pages vierges pendant la récupération des données.

La propriété $routeProvider.Resolve

La propriété $routeProvider.resolve vous permet pour spécifier les dépendances qui doivent être résolues avant qu'un changement d'itinéraire puisse se produire. Cela signifie que le changement d'itinéraire sera retardé jusqu'à ce que ces dépendances soient satisfaites.

Définir un itinéraire avec Resolve

Pour définir un itinéraire qui retarde le changement d'itinéraire jusqu'à ce que model a été chargé, spécifiez simplement la propriété solve dans la configuration de la route. Par exemple :

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

Implémentation de la fonction Resolve

La fonction de résolution est chargée de renvoyer une promesse. Le changement d'itinéraire n'aura lieu que lorsque cette promesse sera résolue. Voici un exemple de fonction de résolution qui récupère une liste de projets à l'aide du service $resource :

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

Une fois la fonction de résolution terminée, le contrôleur correspondant peut accéder aux données résolues, comme la liste des projets.

Empêcher le scintillement lors du chargement des données

Pendant le chargement des données, vous pouvez empêcher le scintillement en continuant à afficher la page en cours. Ceci peut être réalisé en utilisant la directive ng-switch pour afficher de manière conditionnelle l'état de chargement ou les données chargées.

Démo et code source

Pour un exemple fonctionnel et une source code, veuillez vous référer à :

• Démo : http://mhevery.github.com/angular-phonecat/app/#/phones
• Source : https://github.com/mhevery/angular-phonecat/commit/ba33d3ec2d01b70eb5d3d531619bf90153496831

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!