Bagaimanakah Saya Boleh Mencegah Kelipan Semasa Peralihan Laluan AngularJS Apabila Mengambil Data?

Melengahkan Perubahan Laluan AngularJS untuk Pengambilan Data

AngularJS menawarkan penyelesaian untuk mengelakkan kelipan semasa peralihan laluan apabila model memerlukan pengambilan data. Teknik ini, sama dengan gelagat Gmail, membolehkan anda menangguhkan paparan laluan baharu sehingga data model yang diperlukan telah diambil.

Resolve Property of $routeProvider

Kuncinya ciri untuk menangguhkan perubahan laluan ialah sifat menyelesaikan yang dikaitkan dengan $routeProvider. Dengan mentakrifkan laluan dengan atribut menyelesaikan, anda menyatakan bahawa data perlu diambil sebelum laluan boleh beralih.

Contoh

Pertimbangkan contoh berikut:

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

Atribut resolve merujuk kepada objek di mana anda mentakrifkan fungsi untuk mengambil data. Contohnya:

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;
    }
}

Janji Tertunda

Janji digunakan untuk mewakili proses pengambilan data tak segerak. Setiap fungsi menyelesaikan mengembalikan janji, dan AngularJS mengumpulkan semua janji ini. Perubahan laluan ditangguhkan sehingga semua janji diselesaikan, memastikan data sedia sebelum memaparkan paparan baharu.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencegah Kelipan Semasa Peralihan Laluan AngularJS Apabila Mengambil Data?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!