快捷導(dǎo)航

Angular.js中處理頁(yè)面閃爍的方法詳解

更新時(shí)間：2017年03月09日 09:03:14 作者：wolfy

我們?cè)趹?yīng)用的頁(yè)面或者組件需要加載數(shù)據(jù)時(shí)，瀏覽器和angular渲染頁(yè)面都需要消耗一定的時(shí)間。這里的間隔可能很小，甚至讓人感覺(jué)不到區(qū)別；但也可能很長(zhǎng)，這樣會(huì)導(dǎo)致讓我們的用戶看到了沒(méi)有被渲染過(guò)的頁(yè)面。本文將介紹Angular.js中處理頁(yè)面閃爍的方法。

前言

大家在使用{{}}綁定數(shù)據(jù)的時(shí)候，頁(yè)面加載會(huì)出現(xiàn)滿屏盡是{{xxx}}的情況。數(shù)據(jù)還沒(méi)響應(yīng)，但頁(yè)面已經(jīng)渲染了。這是因?yàn)闉g覽器和angularjs渲染頁(yè)面都需要消耗一定的時(shí)間，這個(gè)間隔可能很小，甚至讓人感覺(jué)不到，這種情況一切正常，但這個(gè)時(shí)間也可能很長(zhǎng)，這時(shí)候用戶可能會(huì)看到滿屏盡是{{xxxx}}。這種情況被叫做“Flash Of Unrendered Content (FOUC)（K）？and is always unwanted.”。

問(wèn)題

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

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

但這也為滿屏盡是{{}}埋下了坑。當(dāng)接口，網(wǎng)絡(luò)響應(yīng)速度夠快的情況下，很難發(fā)現(xiàn)這個(gè)問(wèn)題，但放在移動(dòng)端4g或者網(wǎng)絡(luò)環(huán)境更差的情況下，這個(gè)問(wèn)題就會(huì)頻發(fā)。

解決辦法

1、ng-cloak

該指令是angularjs的內(nèi)置的指令，它的作用是隱藏所有被它包含的元素。在瀏覽器加載和編譯渲染完成后，angularjs會(huì)自動(dòng)刪除ngCloak元素屬性，這樣這個(gè)元素就會(huì)變?yōu)榭梢姷摹?/p>

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

2、ng-bind

該指令是angularjs內(nèi)置的用于綁定頁(yè)面數(shù)據(jù)的指令?？梢允褂迷撝噶畲鎨{}}的方式綁定數(shù)據(jù)到頁(yè)面上。使用ng-bind可以防止未被渲染的{{}}展示給用戶。如下所示：

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

3、resolve

當(dāng)使用routes路由的時(shí)候，resolve可以防止我們?cè)趓oute路由被完全加載之前獲取我們需要加載的數(shù)據(jù)，當(dāng)數(shù)據(jù)被加載成功之后，路由再改變而頁(yè)面也會(huì)呈現(xiàn)給用戶，數(shù)據(jù)沒(méi)有加載成功route不會(huì)改變。

可以參考：http://www.dbjr.com.cn/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 項(xiàng)需要一個(gè)key/value對(duì)象，key是resolve依賴的名稱，value可以是一個(gè)字符串（as a service）或者一個(gè)返回依賴的方法。

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

當(dāng)路由加載的時(shí)候，resolve參數(shù)里的keys可以作為可注入的依賴：

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

我們同樣可以使用resolve key傳遞$http方法返回的結(jié)果，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')
 }
 }
 })

推薦定義一個(gè)獨(dú)立的service的方式來(lái)使用resolve key，并且使用service來(lái)相應(yīng)返回所需的數(shù)據(jù)（這種方式更容易測(cè)試）。要這樣處理的話，我們需要?jiǎng)?chuàng)建一個(gè)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之后我們就可以使用這個(gè)service來(lái)替換上面代碼中直接調(diào)用$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()
 }
 }
 })

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: