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

延遲 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中文網其他相關文章！