Bagaimanakah Saya Boleh Menghalang Halaman Berkelip Semasa Perubahan Laluan AngularJS?

Melengahkan Perubahan Laluan AngularJS untuk Menghalang Halaman Berkelip

Apabila menavigasi antara halaman dalam aplikasi AngularJS, kadangkala adalah wajar untuk menangguhkan paparan halaman baharu sehingga model tertentu atau data telah dimuatkan. Ini menghalang kelipan dan memastikan pengalaman pengguna yang lebih lancar.

Menggunakan Harta $routeProvider.resolve

Harta $routeProvider.resolve membolehkan anda menentukan fungsi yang mesti diselesaikan sebelum perubahan laluan boleh berlaku . Fungsi ini boleh digunakan untuk memuatkan model, mengambil data atau melakukan sebarang tindakan tak segerak lain yang diperlukan untuk menyediakan halaman baharu.

angular.module('myApp', []).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.
      when('/myRoute', {
        templateUrl: 'my-route.html',
        controller: 'MyController',
        resolve: MyController.resolve
      })
  }]);

Mentakrifkan Fungsi Penyelesaian

Fungsi resolusi ialah fungsi yang membalas janji. Janji mewakili tindakan tak segerak yang mesti diselesaikan sebelum penghala membenarkan perubahan laluan berlaku.

function MyController($scope, myDataService) {
  $scope.myData = myDataService.getData();
}

MyController.resolve = {
  myData: function(myDataService, $q) {
    var deferred = $q.defer();
    myDataService.getData(function(data) {
      deferred.resolve(data);
    });
    return deferred.promise;
  }
};

Dalam contoh ini, fungsi menyelesaikan menggunakan myDataService untuk mendapatkan semula data. Setelah data diterima, janji diselesaikan dan penghala dimaklumkan bahawa perubahan laluan boleh diteruskan.

Dengan melengahkan perubahan laluan sehingga data dimuatkan, anda boleh meningkatkan pengalaman pengguna dengan mengelakkan kelipan halaman dan memastikan bahawa semua data yang diperlukan tersedia sebelum halaman baharu dipaparkan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menghalang Halaman Berkelip Semasa Perubahan Laluan AngularJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!