Angular.js中處理頁面閃爍的方法詳解，angular.js詳解

Angular.js中處理頁面閃爍的方法詳解，angular.js詳解

前言

大家在使用{{}}綁定資料的時候，頁面載入會出現滿屏儘是{{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不會改變。

可以參考：http://www.bkjia.com/article/80523.htm

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

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的協助，如果有疑問大家可以留言交流，謝謝大家對幫客之家的支援。