データをフェッチする際の AngularJS ルート遷移中のちらつきを防ぐにはどうすればよいですか?

データ取得のための AngularJS ルート変更の遅延

AngularJS は、モデルがデータ取得を必要とする場合、ルート遷移中のちらつきを防ぐソリューションを提供します。この手法は Gmail の動作に似ており、必要なモデル データが取得されるまで新しいルートの表示を遅らせることができます。

$routeProvider のプロパティを解決

キールート変更を遅らせる機能は、$routeProvider に関連付けられたsolveプロパティです。解決属性を使用してルートを定義することにより、ルートが遷移する前にデータをフェッチする必要があることを指定します。

例

次の例を考えてみましょう:

// 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

Promise は、非同期データ取得プロセスを表すために使用されます。各解決関数は Promise を返し、AngularJS はこれらすべての Promise を収集します。ルート変更は、すべての Promise が解決されるまで延期され、新しいビューを表示する前にデータの準備が整っていることが確認されます。

以上がデータをフェッチする際の AngularJS ルート遷移中のちらつきを防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。