取得資料時如何防止 AngularJS 路由轉換期間出現閃爍？

延遲AngularJS 取得資料的路由變更

當模型需要取得資料時，AngularJS 提供了一種防止路由轉換期間閃爍的解決方案。這種技術類似於 Gmail 的行為，可讓您延遲顯示新路線，直到檢索到必要的模型資料。

解析 $routeProvider 的屬性

密鑰延遲路由更改的功能是與 $routeProvider 相關的解析屬性。透過使用解析屬性定義路由，您可以指定在路由轉換之前需要取得資料。

範例

考慮以下範例：

// Define a route with a resolve property
$routeProvider.when('/phones', {
    templateUrl: 'partials/phone-list.html', 
    controller: PhoneListCtrl, 
    resolve: PhoneListCtrl.resolve
});

resolve 屬性是指您定義用於取得資料的函數的物件。例如：

function PhoneListCtrl($scope, phones) {
    $scope.phones = phones;
    $scope.orderProp = 'age';
}

PhoneListCtrl.resolve = {
    phones: function(Phone, $q) {
        // Deferred object for promise handling
        var deferred = $q.defer();
        
        // Fetch data via Phone service
        Phone.query(function(successData) {
            deferred.resolve(successData); 
        }, function(errorData) {
            deferred.reject(); // Optionally handle errors
        });
        
        return deferred.promise;
    }
}

Deferred Promises

Promises 用於表示非同步資料擷取過程。每個解析函數都會傳回一個 Promise，AngularJS 會收集所有這些 Promise。路線變更會延遲，直到所有承諾都已解決，以確保在顯示新視圖之前資料已準備好。

以上是取得資料時如何防止 AngularJS 路由轉換期間出現閃爍？的詳細內容。更多資訊請關注PHP中文網其他相關文章！