如何透過延遲模型載入來防止 AngularJS 路由更改閃爍？

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

AngularJS 提供了一種在 Web 應用程式中管理路由的便捷方法。但是，在某些情況下，您可能希望延遲顯示新路線，直到從伺服器載入相應的模型和資料之後。這對於防止檢索資料時出現閃爍或空白頁面顯示很有用。

$routeProvider.Resolve 屬性

$routeProvider.resolve 屬性可讓您指定在發生路由變更之前需要解決的依賴關係。這意味著路由變更將被延遲，直到滿足這些依賴關係。

使用 Resolve 定義路由

定義一個路由，將路由變更延遲到模型已加載，只需在路由配置上指定resolve屬性即可。例如：

$routeProvider.when('/projects', {
  templateUrl: 'partials/project-list.html',
  controller: PhoneListCtrl,
  resolve: PhoneListCtrl.resolve
});

實作 Resolve 函數

resolve 函數負責傳回一個 Promise。在這項承諾得到解決之前，路線變更不會進行。以下是使用$resource 服務檢索項目清單的解析函數範例：

PhoneListCtrl.resolve = {
  phones: function (Phone, $q) {
    // Create a deferred object to resolve the promise later
    var deferred = $q.defer();

    // Fetch the projects using $resource and resolve the promise when successful
    Phone.query(function (successData) {
      deferred.resolve(successData);
    }, function (errorData) {
      deferred.reject(); // Optionally pass error data here
    });

    // Return the promise
    return deferred.promise;
  },
  // For demonstration purposes, add a delay to the resolve
  delay: function ($q, $defer) {
    var delay = $q.defer();
    $defer(delay.resolve, 1000);
    return delay.promise;
  }
};

解析函數完成後，對應的控制器就可以存取解析後的數據，例如

載入資料時防止閃爍

資料載入時載入後，您可以透過繼續顯示目前頁面來防止閃爍。這可以透過使用 ng-switch 指令有條件地顯示載入狀態或載入的資料來實現。

示範和原始碼

有關工作範例和原始碼程式碼請參考：

• 示範： http://mhevery.github.com/angular-phonecat/app/#/phones
• 來源：https://github.com/mhevery/angular-phonecat/commit/ba33d3ec2d01b70eb5d3d5316196901316196835316196831

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