AngularJS頁(yè)面訪問(wèn)時(shí)出現(xiàn)頁(yè)面閃爍問(wèn)題的解決
我們知道在應(yīng)用的頁(yè)面或者組件需要加載數(shù)據(jù)時(shí)，瀏覽器和angular渲染頁(yè)面都需要消耗一定的時(shí)間。這里的間隔可能很小，甚至讓人感覺(jué)不到區(qū)別；但也可能很長(zhǎng)，這樣會(huì)導(dǎo)致讓我們的用戶看到了沒(méi)有被渲染過(guò)的頁(yè)面。
這種情況被叫做Flash Of Unrendered Content (FOUC)（K）？and is always unwanted.下面我們將要介紹幾個(gè)不同的方式防止這種情況發(fā)生在我們的用戶身上。
1、ng-cloak
ng-cloak指令是angular的內(nèi)置指令，它的作用是隱藏所有被它包含的元素：
<div ng-cloak>
<h1>Hello {{ name }}</h1>
</div>
Ng-cloak實(shí)現(xiàn)原理為一個(gè)directive，頁(yè)面初始化是在DOM的heade增加一行CSS代碼，如下：
<pre class= “prettyprint linenums”>
[ng\:cloak],[ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak{
Display:none ! important;
}
</pre>
<pre class= “prettyprint linenums”>
[ng\:cloak],[ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak{
Display:none ! important;
}
</pre>
Angular將帶有ng-cloak的元素設(shè)置為display：none.
在等到angular解析到帶有ng-cloak節(jié)點(diǎn)的時(shí)候，會(huì)把元素上ng-cloak attribute和calss同時(shí)remove掉，這樣就防止了節(jié)點(diǎn)的閃爍。如下：
<script type =”text/ng-template” id =”scenario.js-150”>
It(‘should remove the template directive and css class',function(){
Expect(element(‘.doc-example-live #template1').attr(‘ng-cloak'))
not().toBeDefined();
Expect(element(‘.doc-example-live #template2').attr(‘ng-cloak')).
Not().toBeDefined();
});
</script>
<script type =”text/ng-template” id =”scenario.js-150”>
It(‘should remove the template directive and css class',function(){
Expect(element(‘.doc-example-live #template1').attr(‘ng-cloak'))
not().toBeDefined();
Expect(element(‘.doc-example-live #template2').attr(‘ng-cloak')).
Not().toBeDefined();
});
</script>
2、ng-bind
ng-bind是angular里面另一個(gè)內(nèi)置的用于操作綁定頁(yè)面數(shù)據(jù)的指令。我們可以使用ng-bind代替{{ }}的形式綁定元素到頁(yè)面上；
使用ng-bind替代{{ }}可以防止未被渲染的{{ }}就展示給用戶了，使用ng-bind渲染的空元素替代{{ }}會(huì)顯得友好很多。
上面的例子可以重寫(xiě)成下面那樣，這樣就可以防止頁(yè)面出現(xiàn){{ }}了
<div> <h1>Hello <span ng-bind="name"></span></h1> </div>
3、resolve
當(dāng)在不同的頁(yè)面之間使用routes（路由）的時(shí)候，我們有另外的方式防止頁(yè)面在數(shù)據(jù)被完全加載到route之前被渲染。
在route（路由）里使用resolve可以讓我們?cè)趓oute（路由）被完全加載之前獲取我們需要加載的數(shù)據(jù)。當(dāng)數(shù)據(jù)被加載成功之后，路由就會(huì)改變而頁(yè)面也會(huì)呈現(xiàn)給用戶；數(shù)據(jù)沒(méi)有被加載成功route就不會(huì)改變， the $routeChangeError event will get fired.【$routeChangeError事件就（不）會(huì)被激活？】
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可以作為可注入的依賴：
angular.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的方式了：
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()
}
}
})
});
相關(guān)文章
Angular.Js之Scope作用域的學(xué)習(xí)教程
這篇文章主要給大家分享了關(guān)于Angular.Js之Scope作用域的學(xué)習(xí)教程 ,文中通過(guò)多個(gè)示例代碼介紹的非常詳細(xì)，相信對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-04-04
angular4中*ngFor不能對(duì)返回來(lái)的對(duì)象進(jìn)行循環(huán)的解決方法
今天小編就為大家分享一篇angular4中*ngFor不能對(duì)返回來(lái)的對(duì)象進(jìn)行循環(huán)的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
完美解決UI-Grid表格元素中多個(gè)空格顯示為一個(gè)空格的問(wèn)題
下面小編就為大家?guī)?lái)一篇完美解決UI-Grid表格元素中多個(gè)空格顯示為一個(gè)空格的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
本篇文章主要介紹了淺談angularr4生命周期鉤子，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
AngularJS基礎(chǔ) ng-options 指令詳解
本文主要介紹AngularJS ng-options 指令,這里對(duì)ng-options指令的知識(shí)做了詳細(xì)整理,并附有詳細(xì)的代碼示例,有需要的小伙伴可以參考下2016-08-08
angular中ui calendar的一些使用心得(推薦)
下面小編就為大家?guī)?lái)一篇angular中ui calendar的一些使用心得(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
Angular.JS中指令ng-if的注意事項(xiàng)小結(jié)
這篇文章主要給大家分享了關(guān)于Angular.JS中指令ng-if的一點(diǎn)注意事項(xiàng)，分享出來(lái)供大家參考學(xué)習(xí)，文中介紹的還是相對(duì)來(lái)說(shuō)比較詳細(xì)，對(duì)大家具有一定的參考借鑒價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-06-06
用Angular實(shí)現(xiàn)一個(gè)掃雷的游戲示例
這篇文章主要介紹了用Angular實(shí)現(xiàn)一個(gè)掃雷的游戲示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要介紹了詳解angular2 控制視圖的封裝模式，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
這篇文章主要介紹了整理AngularJS中的一些常用指令,包括ng-app、ng-init、ng-model和ng-repeat這四個(gè)指令的講解,需要的朋友可以參考下2015-06-06