延遲 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 指令有條件地顯示載入狀態或載入的資料來實現。
示範和原始碼
有關工作範例和原始碼程式碼請參考：
以上是如何透過延遲模型載入來防止 AngularJS 路由更改閃爍？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
