Angularjs injecte un intercepteur pour implémenter Loading effect_AngularJS

Angularjs est un framework Ajax complet. Pour les requêtes, si aucune opération n'est effectuée sur la page, il n'y aura aucune réponse de la page jusqu'à ce que les résultats soient renvoyés, contrairement aux requêtes HTTP ordinaires, il y aura une barre de progression et autres. .

Qu'est-ce qu'un intercepteur ?

Il existe un tableau d'intercepteurs dans $httpProvider, et ce qu'on appelle l'intercepteur n'est qu'une usine de services régulière enregistrée dans le tableau. L'exemple suivant vous montre comment créer un intercepteur :

<!-- 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;
}]);

Ajoutez-le ensuite au tableau $httpProvider.interceptors par son nom :

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

Laissez-moi d'abord vous montrer les rendus :

Cet article implémente le chargement en injectant des intercepteurs dans httpProvider.

code 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>

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

code 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;
}]);

L'Intercepteur vous permet de :

Intercepter les requêtes en implémentant la méthode request : Cette méthode sera exécutée avant que $http n'envoie la requête en arrière-plan, afin que vous puissiez modifier la configuration ou effectuer d'autres opérations. Cette méthode reçoit un objet de configuration de requête en paramètre et doit renvoyer un objet de configuration ou une promesse. Si un objet de configuration ou une promesse non valide est renvoyé, il sera rejeté, entraînant l'échec de l'appel $http.

Interceptez la réponse en implémentant la méthode de réponse : cette méthode sera exécutée après que $http aura reçu la réponse de l'arrière-plan, afin que vous puissiez modifier la réponse ou effectuer d'autres opérations. Cette méthode reçoit un objet de réponse en tant que paramètre et doit renvoyer un objet de réponse ou une promesse. L'objet de réponse comprend la configuration de la demande, les en-têtes, l'état et les données en arrière-plan. Si un objet de réponse non valide est renvoyé ou si la promesse est rejetée, l'appel $http échouera.

Interceptez les exceptions de requête en implémentant la méthode requestError : parfois, une requête ne parvient pas à être envoyée ou est rejetée par l'intercepteur. L'intercepteur d'exception de requête capture les requêtes qui ont été interrompues par l'intercepteur de requête précédent. Il peut être utilisé pour restaurer la demande ou parfois pour annuler la configuration effectuée avant la demande, comme fermer la barre de progression, activer les boutons et les zones de saisie, etc.

Interceptez les exceptions de réponse en implémentant la méthode ResponseError : Parfois, notre appel en arrière-plan échoue. Il est également possible qu'il ait été rejeté par un intercepteur de requête ou interrompu par un intercepteur de réponse précédent. Dans ce cas, l'intercepteur d'exception de réponse peut nous aider à reprendre l'appel en arrière-plan.