Bagaimana untuk Mengelakkan Perubahan Laluan AngularJS berkelip-kelip dengan Menangguhkan Sehingga Model Dimuatkan?

Melengahkan Perubahan Laluan AngularJS Sehingga Model Dimuatkan untuk Menghalang Kelipan

AngularJS menyediakan cara yang mudah untuk mengurus penghalaan dalam aplikasi web. Walau bagaimanapun, terdapat senario di mana anda mungkin mahu menangguhkan memaparkan laluan baharu sehingga selepas model dan data yang sepadan dimuatkan daripada pelayan. Ini berguna untuk mengelakkan paparan halaman berkelip atau kosong semasa data diambil.

Harta $routeProvider.Resolve

Harta $routeProvider.resolve membolehkan anda untuk menentukan kebergantungan yang perlu diselesaikan sebelum perubahan laluan boleh berlaku. Ini bermakna bahawa perubahan laluan akan ditangguhkan sehingga kebergantungan ini telah dipenuhi.

Menentukan Laluan dengan Penyelesaian

Untuk menentukan laluan yang melambatkan perubahan laluan sehingga model telah dimuatkan, hanya nyatakan sifat menyelesaikan pada konfigurasi laluan. Contohnya:

$routeProvider.when('/projects', {
  templateUrl: 'partials/project-list.html',
  controller: PhoneListCtrl,
  resolve: PhoneListCtrl.resolve
});

Melaksanakan Fungsi Resolve

Fungsi Resolve bertanggungjawab untuk mengembalikan janji. Perubahan laluan tidak akan diteruskan sehingga janji ini diselesaikan. Berikut ialah contoh fungsi menyelesaikan yang mendapatkan semula senarai projek menggunakan perkhidmatan $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;
  }
};

Setelah fungsi menyelesaikan selesai, pengawal yang sepadan boleh mengakses data yang diselesaikan, seperti senarai projek.

Cegah kelipan Semasa Memuatkan Data

Semasa data sedang dimuatkan, anda boleh mengelakkan kelipan dengan terus memaparkan halaman semasa. Ini boleh dicapai dengan menggunakan arahan ng-switch untuk memaparkan keadaan pemuatan atau data yang dimuatkan secara bersyarat.

Demo dan Kod Sumber

Untuk contoh dan sumber yang berfungsi kod, sila rujuk:

• Demo: http://mhevery.github.com/angular-phonecat/app/#/phones
• Sumber: https://github.com/mhevery/angular-phonecat/commit/ba33d3ec2d01b70eb5d3d531619bf901531>

Atas ialah kandungan terperinci Bagaimana untuk Mengelakkan Perubahan Laluan AngularJS berkelip-kelip dengan Menangguhkan Sehingga Model Dimuatkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!