AngularJS 防止頁面閃爍的方法，angularjs閃爍

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>

在瀏覽器載入和編譯渲染完成之後，angular會自動刪除ngCloak元素屬性，這樣這個元素就會變成可見的。

在IE7裡面使用ng-cloak的安全方式是給元素多加一個ng-cloak class

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

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

以上所述是小編給大家介紹的AngularJS 防止頁面閃爍的方法，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！