AngularJS中怎么防止頁面閃爍，針對這個問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供榮昌網(wǎng)站建設(shè)、榮昌做網(wǎng)站、榮昌網(wǎng)站設(shè)計、榮昌網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、榮昌企業(yè)網(wǎng)站模板建站服務(wù)，十年榮昌做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

1、ng-cloak

ng-cloak指令是angular的內(nèi)置指令，它的作用是隱藏所有被它包含的元素：

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

在瀏覽器加載和編譯渲染完成之后，angular會自動刪除ngCloak元素屬性，這樣這個元素就會變成可見的。

在IE7里面使用ng-cloak的安全方式是給元素多加一個ng-cloak class

<div ng-cloak class="ng-cloak">
 <h2>Hello {{ name }}</h2>
</div>

2、ng-bind

ng-bind是angular里面另一個內(nèi)置的用于操作綁定頁面數(shù)據(jù)的指令。我們可以使用ng-bind代替{{ }}的形式綁定元素到頁面上；

使用ng-bind替代{{  }}可以防止未被渲染的{{ }}就展示給用戶了，使用ng-bind渲染的空元素替代{{ }}會顯得友好很多。

上面的例子可以重寫成下面那樣，這樣就可以防止頁面出現(xiàn){{ }}了

<div>
 <h2>Hello <span ng-bind="name"></span></h2>
</div>

3、resolve

當(dāng)在不同的頁面之間使用routes（路由）的時候，我們有另外的方式防止頁面在數(shù)據(jù)被完全加載到route之前被渲染。

在route（路由）里使用resolve可以讓我們在route（路由）被完全加載之前獲取我們需要加載的數(shù)據(jù)。當(dāng)數(shù)據(jù)被加載成功之后，路由就會改變而頁面也會呈現(xiàn)給用戶；數(shù)據(jù)沒有被加載成功route就不會改變， the $routeChangeError event will get fired.【$routeChangeError事件就（不）會被激活？】

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.

當(dāng)路由加載的時候，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')
   }
  }
 })
});

推薦定義一個獨(dú)立的service的方式來使用resolve key，并且使用service來相應(yīng)返回所需的數(shù)據(jù)（這種方式更容易測試）。要這樣處理的話，我們需要創(chuàng)建一個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來替換上面代碼中直接調(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)于AngularJS中怎么防止頁面閃爍問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道了解更多相關(guān)知識。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站jinyejixie.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享文章：AngularJS中怎么防止頁面閃爍-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://jinyejixie.com/article38/dedepp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、靜態(tài)網(wǎng)站、網(wǎng)站收錄、商城網(wǎng)站、定制網(wǎng)站、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)