Lösung für das Problem des Seitenflackerns beim Zugriff auf AngularJS page_AngularJS

Wir wissen, dass sowohl der Browser als auch Angular eine gewisse Zeit zum Rendern der Seite benötigen, wenn eine Anwendungsseite oder -komponente Daten laden muss. Die Lücke kann hier so gering sein, dass der Unterschied nicht wahrnehmbar ist, oder sie kann lang sein, sodass unsere Benutzer eine Seite sehen, die nicht gerendert wurde.

Diese Situation wird als Flash Of Unrendered Content (FOUC) (K) bezeichnet. und ist immer unerwünscht. Im Folgenden gehen wir auf verschiedene Möglichkeiten ein, um zu verhindern, dass dies unseren Benutzern passiert.

1. ng-Umhang
Die ng-cloak-Direktive ist eine integrierte Direktive von Angular. Ihre Funktion besteht darin, alle darin enthaltenen Elemente auszublenden:

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

Das Implementierungsprinzip von Ng-cloak ist eine Seiteninitialisierung, die darin besteht, dem Header des DOM eine Zeile CSS-Code hinzuzufügen:

<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 setzt Elemente mit ng-cloak auf display:none.

Wenn Angular den Knoten mit ng-cloak analysiert, werden gleichzeitig das ng-cloak-Attribut und der Calss für das Element entfernt, wodurch verhindert wird, dass der Knoten flackert. Wie folgt:

<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 ist eine weitere integrierte Anweisung in Angular, die zum Bearbeiten gebundener Seitendaten verwendet wird. Wir können ng-bind anstelle von {{ }} verwenden, um Elemente an die Seite zu binden;

Die Verwendung von ng-bind anstelle von {{ }} kann verhindern, dass dem Benutzer das nicht gerenderte {{ }} angezeigt wird. Es ist viel benutzerfreundlicher, leere Elemente zu verwenden, die von ng-bind gerendert werden, um {{ }} zu ersetzen.

Das obige Beispiel kann wie folgt umgeschrieben werden, um zu verhindern, dass {{ }} auf der Seite erscheint

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

3. Lösung
Bei der Verwendung von Routen zwischen verschiedenen Seiten haben wir eine andere Möglichkeit, zu verhindern, dass die Seite gerendert wird, bevor die Daten vollständig in die Route geladen wurden.

Durch die Verwendung von „resolve“ in der Route können wir die Daten abrufen, die wir laden müssen, bevor die Route vollständig geladen ist. Wenn die Daten erfolgreich geladen wurden, ändert sich die Route und die Seite wird dem Benutzer angezeigt. Wenn die Daten nicht erfolgreich geladen werden, ändert sich die Route nicht und das Ereignis $routeChangeError wird ausgelöst (nicht) aktiviert werden? 】

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

Das Auflösungselement erfordert ein Schlüssel-/Wertobjekt. Der Schlüssel ist der Name der Auflösungsabhängigkeit. Der Wert kann eine Zeichenfolge (als Dienst) oder eine Methode sein, die die Abhängigkeit zurückgibt.

resolve ist sehr nützlich, wenn der Auflösungswert ein Versprechen zurückgibt, das gelöst oder abgelehnt wird.

Wenn die Route geladen ist, können die Schlüssel im Auflösungsparameter als injizierbare Abhängigkeiten verwendet werden:

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

Wir können den Auflösungsschlüssel auch verwenden, um die von der $http-Methode zurückgegebenen Ergebnisse zu übergeben, da $http Versprechen von seinen Methodenaufrufen zurückgibt:

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

Es wird empfohlen, einen unabhängigen Dienst zu definieren, der den Auflösungsschlüssel verwendet, und den Dienst zu verwenden, um die erforderlichen Daten entsprechend zurückzugeben (diese Methode ist einfacher zu testen). Um dies auf diese Weise zu handhaben, müssen wir einen Dienst erstellen:

Werfen Sie zunächst einen Blick auf 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;
 }
 }
})

Nachdem wir den Dienst definiert haben, können wir diesen Dienst verwenden, um den direkten Aufruf von $http im obigen Code zu ersetzen:

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