Comment mettre en cache un service http get dans angularjs

Je veux être en mesure de créer un service personnalisé qui récupère une requête HTTP dans le cas où l’object de données est vide et remplit l’object de données en cas de succès. La prochaine fois qu’un appel de service est effectué, le périphérique n’appelle pas http get et présente l’object de données.

Des idées sur la façon de le faire?

Angular $ http a un cache intégré . Selon les documents:

cache – {boolean | Object} – Valeur booléenne ou object créé avec $ cacheFactory pour activer ou désactiver la mise en cache de la réponse HTTP. Voir $ http Caching pour plus d’informations .

Valeur booléenne

Vous pouvez donc définir le cache sur true dans ses options:

 $http.get(url, { cache: true}).success(...); 

ou, si vous préférez le type d’appel de configuration:

 $http({ cache: true, url: url, method: 'GET'}).success(...); 

Objet Cache

Vous pouvez également utiliser une fabrique de cache:

 var cache = $cacheFactory('myCache'); $http.get(url, { cache: cache }) 

Vous pouvez l’implémenter vous-même en utilisant $ cacheFactory (particulièrement à la main lorsque vous utilisez $ resource):

 var cache = $cacheFactory('myCache'); var data = cache.get(someKey); if (!data) { $http.get(url).success(function(result) { data = result; cache.put(someKey, data); }); } 

Je pense qu’il y a un moyen encore plus facile maintenant. Cela permet la mise en cache de base pour toutes les requêtes $ http (dont $ resource hérite):

  var app = angular.module('myApp',[]) .config(['$httpProvider', function ($httpProvider) { // enable http caching $httpProvider.defaults.cache = true; }]) 

Un moyen plus simple de le faire dans la version stable actuelle (1.0.6) nécessite beaucoup moins de code.

Après avoir configuré votre module, ajoutez une fabrique:

 var app = angular.module('myApp', []); // Configure routes and controllers and views associated with them. app.config(function ($routeProvider) { // route setups }); app.factory('MyCache', function ($cacheFactory) { return $cacheFactory('myCache'); }); 

Maintenant, vous pouvez le transmettre à votre contrôleur:

 app.controller('MyController', function ($scope, $http, MyCache) { $http.get('fileInThisCase.json', { cache: MyCache }).success(function (data) { // stuff with results }); }); 

L’inconvénient est que les noms de clés sont également configurés automatiquement, ce qui pourrait compliquer leur élimination. Espérons qu’ils vont append des moyens pour obtenir des noms de clés.

Consultez le cache angular de la bibliothèque si vous aimez la mise en cache intégrée de $ http mais souhaitez davantage de contrôle. Vous pouvez l’utiliser pour augmenter de manière transparente le cache $ http avec les purges périodiques, les purges périodiques et la possibilité de conserver le cache sur localStorage afin qu’il soit disponible entre les sessions.

FWIW, il fournit également des outils et des modèles pour transformer votre cache en une sorte de magasin de données plus dynamic avec laquelle vous pouvez interagir en tant que POJO, plutôt que simplement les chaînes JSON par défaut. Impossible de commenter l’utilitaire de cette option pour le moment.

(En plus de cela, les données angulars de la bibliothèque associée sont en quelque sorte un remplacement de $ resource et / ou Restangular, et dépendent du cache angular.)

Comme les usines AngularJS sont des singletons , vous pouvez simplement stocker le résultat de la requête http et le récupérer la prochaine fois que votre service est injecté dans quelque chose.

 angular.module('myApp', ['ngResource']).factory('myService', function($resource) { var cache = false; return { query: function() { if(!cache) { cache = $resource('http://example.com/api').query(); } return cache; } }; } ); 
 angularBlogServices.factory('BlogPost', ['$resource', function($resource) { return $resource("./Post/:id", {}, { get: {method: 'GET', cache: true, isArray: false}, save: {method: 'POST', cache: false, isArray: false}, update: {method: 'PUT', cache: false, isArray: false}, delete: {method: 'DELETE', cache: false, isArray: false} }); }]); 

définir le cache pour être vrai.