首頁 > web前端 > js教程 > AngularJS 如何透過延遲直到資料載入來防止路由更改閃爍?

AngularJS 如何透過延遲直到資料載入來防止路由更改閃爍?

Patricia Arquette
發布: 2024-11-28 10:27:11
原創
351 人瀏覽過

How Can AngularJS Prevent Route Change Flicker by Delaying Until Data Loads?

延遲 AngularJS 路由變更直到資料載入以防止閃爍

在 AngularJS 中,突然變更路由有時會在新頁面載入時導致閃爍。為了解決這個問題,我們可以延遲顯示新路線,直到檢索到所有必要的資料之後。

問題:如何將AngularJS 配置為等到模型和資料完全載入後再顯示一個新的路由,類似於Gmail的方式

解決方案:類似於Gmail的方式

解決方案:類似於Gmail的方式

解決方案:類似於Gmail的方式
function PhoneListCtrl($scope, phones) {
  $scope.phones = phones;
  $scope.orderProp = 'age';
}

PhoneListCtrl.resolve = {
  phones: function(Phone, $q) {
    var deferred = $q.defer();
    Phone.query(function(successData) {
      deferred.resolve(successData);
    }, function(errorData) {
      deferred.reject();
    });
    return deferred.promise;
  }
};
登入後複製

解決方案:類似於Gmail的方式

angular.module('phonecat').config(['$routeProvider', function($routeProvider) {
  $routeProvider.
    when('/phones', {
      templateUrl: 'partials/phone-list.html',
      controller: PhoneListCtrl,
      resolve: PhoneListCtrl.resolve
    });
}]);
登入後複製
解決方案:類似於Gmail的方式

解決方案: 為了防止閃爍,AngularJS在路由中提供了resolve屬性。透過定義解析函數,我們可以指定在繼續更改路由之前需要解析哪些依賴項。 考慮以下範例:在此範例中,我們定義了一個解析PhoneListCtrl 的函數,傳回電話資料的承諾。一旦 Promise 被解析,資料就可供控制器使用。 在 AngularJS 應用程式中配置路由:透過使用解析屬性,AngularJS 延遲路由更改,直到手機承諾已解決,確保在顯示新頁面之前載入資料。這種方法可以防止頁面轉換期間出現任何閃爍。

以上是AngularJS 如何透過延遲直到資料載入來防止路由更改閃爍?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板