Bagaimanakah AngularJS Boleh Menghalang Perubahan Laluan Berkelip dengan Menangguhkan Sehingga Data Dimuatkan?

Melengahkan Perubahan Laluan AngularJS Sehingga Data Dimuatkan untuk Menghalang Kelipan

Dalam AngularJS, menukar laluan secara tiba-tiba kadangkala boleh menyebabkan kelipan apabila halaman baharu dimuatkan. Untuk menangani masalah ini, kami boleh menangguhkan menunjukkan laluan baharu sehingga selepas semua data yang diperlukan telah diambil.

Masalah: Bagaimanakah AngularJS boleh dikonfigurasikan untuk menunggu sehingga model dan data dimuatkan sepenuhnya sebelum dipaparkan laluan baharu, serupa dengan cara Gmail beroperasi?

Penyelesaian:

Untuk mengelakkan kelipan, AngularJS menyediakan sifat menyelesaikan dalam laluan. Dengan mentakrifkan fungsi menyelesaikan, kami boleh menentukan kebergantungan yang perlu diselesaikan sebelum meneruskan dengan perubahan laluan.

Pertimbangkan contoh berikut:

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

PhoneListCtrl.resolve = {
  phones: function(Phone, $q) {
    var deferred = $q.defer();
    Phone.query(function(successData) {
      deferred.resolve(successData);
    }, function(errorData) {
      deferred.reject();
    });
    return deferred.promise;
  }
};

Dalam contoh ini, kami mentakrifkan penyelesaian fungsi untuk PhoneListCtrl yang mengembalikan janji untuk data telefon. Setelah janji diselesaikan, data menjadi tersedia kepada pengawal.

Mengkonfigurasi laluan dalam aplikasi AngularJS:

angular.module('phonecat').config(['$routeProvider', function($routeProvider) {
  $routeProvider.
    when('/phones', {
      templateUrl: 'partials/phone-list.html',
      controller: PhoneListCtrl,
      resolve: PhoneListCtrl.resolve
    });
}]);

Dengan menggunakan sifat resolve, AngularJS menangguhkan perubahan laluan sehingga janji telefon diselesaikan, memastikan data dimuatkan sebelum halaman baharu dipaparkan. Pendekatan ini menghalang sebarang kelipan semasa peralihan halaman.

Atas ialah kandungan terperinci Bagaimanakah AngularJS Boleh Menghalang Perubahan Laluan Berkelip dengan Menangguhkan Sehingga Data Dimuatkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!