Solution au problème de scintillement des pages lors de l'accès à AngularJS page_AngularJS

Nous savons que lorsqu'une page d'application ou un composant doit charger des données, le navigateur et Angular prendront un certain temps pour afficher la page. L'écart ici peut être si petit que la différence n'est pas perceptible ; ou il peut être long, ce qui amène nos utilisateurs à voir une page qui n'a pas été rendue.

Cette situation s'appelle Flash Of Unrendered Content (FOUC) (K) ? et est toujours indésirable. Ci-dessous, nous passerons en revue différentes manières d'éviter que cela n'arrive à nos utilisateurs.

1.ng-manteau
La directive ng-cloak est une directive intégrée d'Angular. Sa fonction est de masquer tous les éléments qu'elle contient :

<div ng-cloak>
 <h1>Hello {{ name }}</h1>
</div>

Le principe d'implémentation de Ng-cloak est une directive d'initialisation de page consiste à ajouter une ligne de code CSS à l'entête du DOM, comme suit :

<pre class= “prettyprint linenums”>

  [ng\:cloak],[ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak{

  Display:none ! important;

}

 
  [ng\:cloak],[ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak{
 
  Display:none ! important;
 
}
 

Angular définit les éléments avec ng-cloak pour afficher : aucun.

Lorsque Angular analyse le nœud avec ng-cloak, il supprimera l'attribut ng-cloak et lancera un appel sur l'élément en même temps, empêchant ainsi le nœud de scintiller. Comme suit :

<script type =”text/ng-template” id =”scenario.js-150”>

  It(‘should remove the template directive and css class',function(){

 Expect(element(‘.doc-example-live #template1').attr(‘ng-cloak'))

  not().toBeDefined();

   Expect(element(‘.doc-example-live #template2').attr(‘ng-cloak')).

Not().toBeDefined();

});

</script>

<script type =”text/ng-template” id =”scenario.js-150”>
 
  It(‘should remove the template directive and css class',function(){
 
 Expect(element(‘.doc-example-live #template1').attr(‘ng-cloak'))
 
  not().toBeDefined();
 
   Expect(element(‘.doc-example-live #template2').attr(‘ng-cloak')).
 
Not().toBeDefined();
 
});
 
</script>

2.ng-bind
ng-bind est une autre instruction intégrée dans Angular qui est utilisée pour exploiter les données de page liées. Nous pouvons utiliser ng-bind au lieu de {{ }} pour lier des éléments à la page

L'utilisation de ng-bind au lieu de {{ }} peut empêcher le {{ }} non rendu d'être affiché à l'utilisateur. Il sera beaucoup plus convivial d'utiliser des éléments vides rendus par ng-bind pour remplacer {{ }}.

L'exemple ci-dessus peut être réécrit comme suit, afin d'empêcher {{ }} d'apparaître sur la page

<div>
 <h1>Hello <span ng-bind="name"></span></h1>
</div>

3. résoudre
Lorsque vous utilisez des itinéraires entre différentes pages, nous avons un autre moyen d'empêcher le rendu de la page avant que les données ne soient complètement chargées dans l'itinéraire.

L'utilisation de la résolution dans l'itinéraire nous permet d'obtenir les données dont nous avons besoin pour charger avant que l'itinéraire ne soit complètement chargé. Lorsque les données sont chargées avec succès, l'itinéraire changera et la page sera présentée à l'utilisateur ; si les données ne sont pas chargées avec succès, l'itinéraire ne changera pas et l'événement $routeChangeError sera déclenché [L'événement $routeChangeError sera déclenché. (ne pas) être activé ? 】

angular.module('myApp', ['ngRoute'])
.config(function($routeProvider) {
 $routeProvider
 .when('/account', {
 controller: 'AccountCtrl',
 templateUrl: 'views/account.html',
 resolve: {
  // We specify a promise to be resolved
  account: function($q) {
  var d = $q.defer();
  $timeout(function() {
   d.resolve({
   id: 1,
   name: 'Ari Lerner'
   })
  }, 1000);
  return d.promise;
  }
 }
 })
});

L'élément de résolution nécessite un objet clé/valeur. Key est le nom de la dépendance de résolution. La valeur peut être une chaîne (en tant que service) ou une méthode qui renvoie la dépendance.

resolve est très utile lorsque la valeur de résolution renvoie une promesse qui est résolue ou rejetée.

Lorsque la route est chargée, les clés du paramètre solve peuvent être utilisées comme dépendances injectables :

angular.module('myApp')
.controller('AccountCtrl', 
 function($scope, account) {
 $scope.account = account;
});

Nous pouvons également utiliser la clé de résolution pour transmettre les résultats renvoyés par la méthode $http, car $http renvoie les promesses de ses appels de méthode :

angular.module('myApp', ['ngRoute'])
.config(function($routeProvider) {
 $routeProvider
 .when('/account', {
 controller: 'AccountCtrl',
 templateUrl: 'views/account.html',
 resolve: {
  account: function($http) {
  return $http.get('http://example.com/account.json')
  }
 }
 })
});

Il est recommandé de définir un service indépendant pour utiliser la clé de résolution et d'utiliser le service pour renvoyer les données requises en conséquence (cette méthode est plus facile à tester). Pour le gérer de cette façon, nous devons créer un service :

Tout d'abord, jetez un œil à accountService,

angular.module('app')
.factory('accountService', function($http, $q) {
 return {
 getAccount: function() {
  var d = $q.defer();
  $http.get('/account')
  .then(function(response) {
  d.resolve(response.data)
  }, function err(reason) {
  d.reject(reason);
  });
  return d.promise;
 }
 }
})

Après avoir défini le service, nous pouvons utiliser ce service pour remplacer l'appel direct à $http dans le code ci-dessus :

angular.module('myApp', ['ngRoute'])
.config(function($routeProvider) {
 $routeProvider
 .when('/account', {
 controller: 'AccountCtrl',
 templateUrl: 'views/account.html',
 resolve: {
  // We specify a promise to be resolved
  account: function(accountService) {
  return accountService.getAccount()
  }
 }
 })
});