Penyelesaian kepada masalah kelipan halaman apabila mengakses AngularJS page_AngularJS

Kami tahu bahawa apabila halaman aplikasi atau komponen perlu memuatkan data, kedua-dua penyemak imbas dan Angular akan mengambil masa tertentu untuk memaparkan halaman tersebut. Jurang di sini mungkin sangat kecil sehingga perbezaannya tidak ketara atau mungkin panjang, menyebabkan pengguna kami melihat halaman yang belum dipaparkan.

Keadaan ini dipanggil Flash Of Unrendered Content (FOUC) (K)? dan sentiasa tidak diingini. Di bawah ini kami akan membincangkan beberapa cara berbeza untuk mengelakkan perkara ini berlaku kepada pengguna kami.

1. ng-jubah
Arahan ng-cloak ialah arahan terbina dalam Angular Fungsinya adalah untuk menyembunyikan semua elemen yang terkandung di dalamnya:

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

Prinsip pelaksanaan Ng-cloak ialah arahan permulaan Halaman adalah untuk menambah baris kod CSS pada pengepala DOM, seperti berikut:

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

Sudut set elemen dengan ng-jubah untuk dipaparkan:tiada.

Apabila sudut menghuraikan nod dengan ng-jubah, ia akan mengalih keluar atribut ng-jubah dan calss pada elemen pada masa yang sama, sekali gus menghalang nod daripada berkelip. Seperti berikut:

<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 ialah satu lagi arahan terbina dalam dalam Angular yang digunakan untuk mengendalikan data halaman terikat. Kita boleh menggunakan ng-bind dan bukannya {{ }} untuk mengikat elemen pada halaman;

Menggunakan ng-bind dan bukannya {{ }} boleh menghalang {{ }} yang tidak dipaparkan daripada dipaparkan kepada pengguna. Ia akan menjadi lebih mesra untuk menggunakan elemen kosong yang diberikan oleh ng-bind untuk menggantikan {{ }}.

Contoh di atas boleh ditulis semula seperti berikut, untuk mengelakkan {{ }} daripada muncul pada halaman

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

3. azam
Apabila menggunakan laluan antara halaman yang berbeza, kami mempunyai cara lain untuk menghalang halaman daripada dipaparkan sebelum data dimuatkan sepenuhnya ke dalam laluan.

Menggunakan azam dalam laluan membolehkan kami mendapatkan data yang perlu kami muatkan sebelum laluan dimuatkan sepenuhnya. Apabila data berjaya dimuatkan, laluan akan berubah dan halaman akan dibentangkan kepada pengguna jika data tidak berjaya dimuatkan, laluan tidak akan berubah dan acara $routeChangeError akan dipecat [Acara $routeChangeError akan (tidak) diaktifkan? 】

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

Item resolve memerlukan objek kunci/nilai ialah nama kebergantungan resolusi boleh menjadi rentetan (sebagai perkhidmatan) atau kaedah yang mengembalikan kebergantungan.

resolve sangat berguna apabila nilai resolve mengembalikan janji yang menjadi diselesaikan atau ditolak.

Apabila laluan dimuatkan, kekunci dalam parameter penyelesaian boleh digunakan sebagai kebergantungan suntikan:

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

Kami juga boleh menggunakan kunci tekad untuk menghantar keputusan yang dikembalikan oleh kaedah $http, kerana $http mengembalikan janji daripada panggilan kaedahnya:

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

Adalah disyorkan untuk menentukan perkhidmatan bebas untuk menggunakan kunci penyelesaian dan menggunakan perkhidmatan untuk mengembalikan data yang diperlukan dengan sewajarnya (kaedah ini lebih mudah untuk diuji). Untuk mengendalikannya dengan cara ini, kami perlu mencipta perkhidmatan:

Pertama sekali, lihat pada 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;
 }
 }
})

Selepas menentukan perkhidmatan, kami boleh menggunakan perkhidmatan ini untuk menggantikan panggilan terus ke $http dalam kod di atas:

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