我們知道在應(yīng)用的頁面或者組件需要加載數(shù)據(jù)時(shí)，瀏覽器和angular渲染頁面都需要消耗一定的時(shí)間巷折。這里的間隔可能很小压鉴，甚至讓人感覺不到區(qū)別；但也可能很長锻拘，這樣會(huì)導(dǎo)致讓我們的用戶看到了沒有被渲染過的頁面油吭。
這種情況被叫做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>
在瀏覽器加載和編譯渲染完成之后芯丧，angular會(huì)自動(dòng)刪除ngCloak元素屬性芍阎，這樣這個(gè)元素就會(huì)變成可見的。
在IE7里面使用ng-cloak的安全方式是給元素多加一個(gè)ng-cloak class
<div ng-cloak class="ng-cloak">
<h1>Hello {{ name }}</h1>
</div>
2缨恒、ng-bind
ng-bind是angular里面另一個(gè)內(nèi)置的用于操作綁定頁面數(shù)據(jù)的指令谴咸。我們可以使用ng-bind代替{{ }}的形式綁定元素到頁面上；
使用ng-bind替代{{ }}可以防止未被渲染的{{ }}就展示給用戶了骗露，使用ng-bind渲染的空元素替代{{ }}會(huì)顯得友好很多岭佳。
上面的例子可以重寫成下面那樣，這樣就可以防止頁面出現(xiàn){{ }}了
<div>
<h1>Hello <span ng-bind="name"></span></h1>
</div>
3萧锉、resolve
當(dāng)在不同的頁面之間使用routes（路由）的時(shí)候珊随，我們有另外的方式防止頁面在數(shù)據(jù)被完全加載到route之前被渲染。
在route（路由）里使用resolve可以讓我們?cè)趓oute（路由）被完全加載之前獲取我們需要加載的數(shù)據(jù)。當(dāng)數(shù)據(jù)被加載成功之后叶洞，路由就會(huì)改變而頁面也會(huì)呈現(xiàn)給用戶鲫凶；數(shù)據(jù)沒有被加載成功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的方式來使用resolve key封寞，并且使用service來相應(yīng)返回所需的數(shù)據(jù)（這種方式更容易測試）然评。要這樣處理的話，我們需要?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來替換上面代碼中直接調(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()
}
}
})
});
