Angularjs menyuntik pemintas untuk melaksanakan Loading effect_AngularJS

Angularjs ialah rangka kerja Ajax penuh Untuk permintaan, jika tiada operasi dilakukan pada halaman, tidak akan ada respons daripada halaman sehingga keputusan dikembalikan Tidak seperti permintaan HTTP biasa, akan ada bar kemajuan dan seumpamanya .

Apakah pemintas?

Terdapat tatasusunan pemintas dalam $httpProvider, dan pemintas yang dipanggil hanyalah sebuah kilang servis biasa yang didaftarkan dalam tatasusunan. Contoh berikut menunjukkan kepada anda cara membuat pemintas:

<!-- lang: js -->
module.factory('myInterceptor', ['$log', function($log) {
 $log.debug('$log is here to show you that this is a regular factory with injection');
 var myInterceptor = {
  ....
  ....
  ....
 };
 return myInterceptor;
}]);

Kemudian tambahkannya pada tatasusunan $httpProvider.interceptors dengan namanya:

<!-- lang: js -->
module.config(['$httpProvider', function($httpProvider) {
 $httpProvider.interceptors.push('myInterceptor');
}]);

Biar saya tunjukkan renderingnya dahulu:

Artikel ini melaksanakan pemuatan dengan menyuntik pemintas ke dalam httpProvider.

kod html

<div class="loading-modal modal" ng-if="loading">
 <div class="loading">
  <img src="<&#63;=$this->module->getAssetsUrl()&#63;>/img/loading.gif" alt=""/><span ng-bind="loading_text"></span>
 </div>
</div>

kod css

.modal {
 position: fixed;
 width: 100%;
 height: 100%;
 left: 0;
 top: 0;
 z-index: 99;
 background: rgba(0, 0, 0, 0.3);
 overflow: hidden;
}
.loading {
 position: absolute;
 top: 50%;
 background: white;
 #solution> .border-radius(8px);
 width: 160px;
 height: 72px;
 left: 50%;
 margin-top: -36px;
 margin-left: -80px;
 text-align: center;
 img {
 margin-top: 12px;
 text-align: center;
 }
 span {
 display: block;
 }
}

kod js

app.config(["$routeProvider", "$httpProvider", function ($routeProvider, $httpProvider) {
 $routeProvider.when('/', {
  templateUrl: "/views/reminder/index.html",
  controller: "IndexController"
 });
 $routeProvider.when('/create', {
  templateUrl: "/views/reminder/item/create.html",
  controller: "ItemCreateController"
 });
 $routeProvider.otherwise({redirectTo: '/'});
 $httpProvider.interceptors.push('timestampMarker');
}]);
//loading
app.factory('timestampMarker', ["$rootScope", function ($rootScope) {
 var timestampMarker = {
  request: function (config) {
   $rootScope.loading = true;
   config.requestTimestamp = new Date().getTime();
   return config;
  },
  response: function (response) {
   // $rootScope.loading = false;
   response.config.responseTimestamp = new Date().getTime();
   return response;
  }
 };
 return timestampMarker;
}]);

Pemintas membenarkan anda untuk:

Permintaan memintas dengan melaksanakan kaedah permintaan: Kaedah ini akan dilaksanakan sebelum $http menghantar permintaan ke latar belakang, jadi anda boleh mengubah suai konfigurasi atau melakukan operasi lain. Kaedah ini menerima objek konfigurasi permintaan sebagai parameter dan mesti mengembalikan objek konfigurasi atau janji. Jika objek konfigurasi yang tidak sah atau janji dikembalikan, ia akan ditolak, menyebabkan panggilan $http gagal.

Memintas respons dengan melaksanakan kaedah respons: Kaedah ini akan dilaksanakan selepas $http menerima respons daripada latar belakang, jadi anda boleh mengubah suai respons atau melakukan operasi lain. Kaedah ini menerima objek tindak balas sebagai parameter dan mesti mengembalikan objek respons atau janji. Objek tindak balas termasuk konfigurasi permintaan, pengepala, status dan data dari latar belakang. Jika objek respons tidak sah dikembalikan atau janji akan ditolak, panggilan $http akan gagal.

Memintas pengecualian permintaan dengan melaksanakan kaedah requestError: Kadangkala permintaan gagal dihantar atau ditolak oleh pemintas. Pemintas pengecualian permintaan menangkap permintaan yang diganggu oleh pemintas permintaan sebelumnya. Ia boleh digunakan untuk memulihkan permintaan atau kadangkala untuk membuat asal konfigurasi yang dibuat sebelum permintaan, seperti menutup bar kemajuan, mengaktifkan butang dan kotak input, dsb.

Memintas pengecualian respons dengan melaksanakan kaedah responseError: Kadangkala panggilan latar belakang kami gagal. Terdapat juga kemungkinan bahawa ia telah ditolak oleh pemintas permintaan, atau diganggu oleh pemintas respons sebelumnya. Dalam kes ini, pemintas pengecualian respons boleh membantu kami menyambung semula panggilan latar belakang.