您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)Angularjs如何處理頁(yè)面閃爍的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧。
摘要
在使用{{}}綁定數(shù)據(jù)的時(shí)候,頁(yè)面加載會(huì)出現(xiàn)滿屏盡是{{xxx}}的情況。數(shù)據(jù)還沒(méi)響應(yīng),但頁(yè)面已經(jīng)渲染了。這是因?yàn)闉g覽器和angularjs渲染頁(yè)面都需要消耗一定的時(shí)間,這個(gè)間隔可能很小,甚至讓人感覺不到,這種情況一切正常,但這個(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ì)改變。
可以參考
https://www.jb51.net/article/107905.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() } } })
感謝各位的閱讀!關(guān)于“Angularjs如何處理頁(yè)面閃爍”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。