AngularJS頁面造訪時出現頁面閃爍問題的解決_AngularJS

我們知道在應用程式的頁面或元件需要載入資料時，瀏覽器和angular渲染頁面都需要消耗一定的時間。這裡的間隔可能很小，甚至讓人感覺不到差別；但也可能很長，這會導致讓我們的使用者看到了沒有被渲染過的頁面。

這種情況叫做Flash Of Unrendered Content (FOUC)（K）？ and is always unwanted.下面我們將要介紹幾個不同的方式防止這種情況發生在我們的用戶身上。

1、ng-cloak
ng-cloak指令是angular內建的指令，它的作用是隱藏所有被它包含的元素：

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

Ng-cloak實作原理為一個directive，頁面初始化是在DOM的heade增加一行CSS程式碼，如下：

<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將帶有ng-cloak的元素設定為display：none.

在等到angular解析到有ng-cloak節點的時候，會把元素上ng-cloak  attribute和calss同時remove掉，這樣就防止了節點的閃爍。如下：

<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是angular裡面另一個內建的用來操作綁定頁面資料的指令。我們可以使用ng-bind代替{{ }}的形式綁定元素到頁面上；

使用ng-bind取代{{  }}可以防止未被渲染的{{ }}就展示給使用者了，使用ng-bind渲染的空元素替代{{ }}會顯得友善很多。

上面的例子可以改寫成下面那樣，這樣就可以防止頁面出現{{ }}了

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

3、resolve
當在不同的頁面之間使用routes（路由）的時候，我們有另外的方式防止頁面在資料被完全載入到route之前被渲染。

在route（路由）裡使用resolve可以讓我們在route（路由）被完全載入之前取得我們需要載入的資料。當資料載入成功之後，路由就會改變而頁面也會呈現給使用者；資料沒有被載入成功route就不會改變， the $routeChangeError event will get fired.【$routeChangeError事件就（不）會被啟動？ 】

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

resolve 項目需要一個key/value對象，key是resolve依賴的名稱，value可以是一個字串（as a service）或是一個傳回依賴的方法。

resolve is very useful when the resolve value returns a promise that becomes resolved or rejected.

當路由載入的時候，resolve參數裡的keys可以當作可注入的依賴：

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

我們同樣可以使用resolve key傳遞$http方法回傳的結果，as $http returns promises from it's method calls:

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

推薦定義一個獨立的service的方式來使用resolve key，並且使用service來相應返回所需的資料（這種方式更容易測試）。要這樣處理的話，我們需要建立一個service：

首先，先來看看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;
 }
 }
})

定義好service之後我們就可以使用這個service來取代上面程式碼中直接呼叫$http的方式了：

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