[Angularjs]處理頁面閃爍的方法

摘要

在使用{{}}綁定數據的時候，頁面加載會出現滿屏盡是{{xxx}}的情況。數據還沒響應，但頁面已經渲染了。這是因為瀏覽器和angularjs渲染頁面都需要消耗一定的時間，這個間隔可能很小，甚至讓人感覺不到，這種情況一切正常，但這個時間也可能很長，這時候用戶可能會看到滿屏盡是{{xxxx}}。這種情況被叫做“Flash Of Unrendered Content (FOUC)（K）？and is always unwanted.”。

問題

為了圖方便，我們很喜歡使用下面的做法

   <div>
        {{name}}
    </div>

但這也為滿屏盡是{{}}埋下了坑。當接口，網絡響應速度夠快的情況下，很難發現這個問題，但放在移動端4g或者網絡環境更差的情況下，這個問題就會頻發。

解決辦法

1、ng-cloak

該指令是angularjs的內置的指令，它的作用是隱藏所有被它包含的元素。在瀏覽器加載和編譯渲染完成后，angularjs會自動刪除ngCloak元素屬性，這樣這個元素就會變為可見的。

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

2、ng-bind

該指令是angularjs內置的用於綁定頁面數據的指令。可以使用該指令代替{{}}的方式綁定數據到頁面上。使用ng-bind可以防止未被渲染的{{}}展示給用戶。如下所示：

    <div ng-bind="name">      
    </div>

3、resolve

當使用routes路由的時候，resolve可以防止我們在route路由被完全加載之前獲取我們需要加載的數據，當數據被加載成功之后，路由再改變而頁面也會呈現給用戶，數據沒有加載成功route不會改變。

可以參考

https://my.oschina.net/tanweijie/blog/295255

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可以作為可注入的依賴：

ngular.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的方式了：

ngular.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()
      }
    }
  })

資料

https://my.oschina.net/tanweijie/blog/295255