Valeur booléenne

48

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;
      }])
gspatel
la source
46
Vous voulez à peine mettre en cache chaque requête http unique. Je ne vois pas quand ce sera le cas?
Spock
1
Chaque application / module est différent, non?!
rodrigo-silveira
13
Si vous souhaitez mettre en cache la majorité des demandes, la définition de la valeur par défaut sur true est pratique.
Adrian Lynch

Réponses:

12

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 usine:

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');
});

Vous pouvez maintenant transmettre ceci à votre contrôleur:

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

Un inconvénient est que les noms des clés sont également configurés automatiquement, ce qui pourrait rendre leur effacement difficile. J'espère qu'ils ajouteront d'une manière ou d'une autre des noms clés.

James Skemp
la source
7

Consultez le cache angulaire de la bibliothèque si vous aimez la mise en cache intégrée de $ http mais souhaitez plus de contrôle. Vous pouvez l'utiliser pour augmenter de manière transparente le cache $ http avec des purges périodiques de durée de vie et la possibilité de conserver le cache sur localStorage afin qu'il soit disponible sur toutes 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 dynamique avec laquelle vous pouvez interagir en tant que POJO, plutôt que simplement les chaînes JSON par défaut. Je ne peux pas encore commenter l'utilité de cette option.

(Ensuite, en plus de cela, les données angulaires de bibliothèque associées remplacent en quelque sorte $ resource et / ou Restangular, et dépendent de angular-cache.)

XML
la source
3
Veuillez noter que angular-datac'est obsolète maintenant. Le dernier en date est js-data-angular js-data.io/v1.8.0/docs/js-data-angular
demisx
La bibliothèque angular-cache possède les fonctionnalités qui auraient dû être intégrées à $ cacheFactory d'Angular. La solution intégrée semble presque inutile étant donné ses limites dans la possibilité d'expiration de caches spécifiques. L'usine de cache angulaire était également l'une des bibliothèques tierces les plus faciles à implémenter.
Darryl
5

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;
      }
    };
  }
);
Rimian
la source
J'ai une question sur la façon de vérifier si GET a échoué et dans ce cas de ne pas mettre en cache la ressource $ resource ... query ()
robert
@robert vous pouvez vérifier le deuxième argument de la méthode .then ou mieux encore, utiliser le rappel .catch. Par exemple $ http .get (url) .then (successCallback, failCallback) ou $ http .get (url) .then (successCallback, failCallback) .catch (errorCallback) Le rappel d'erreur sera exécuté même si quelque chose de mal se produit dans le failCallback , bien qu'il soit plus courant d'éviter tout échec de rappel et d'utiliser .then (success) .catch (manageRequestFail). J'espère que cela vous aidera à saisir l'idée, plus d'informations dans la documentation angulaire $ http.
Faito
2
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éfinissez le cache sur true.

Howardyan
la source
Ce serait aussi sûr que l'application cliente avec le navigateur lui-même comme n'importe quelle autre application Web.
bhantol
-1

Dans Angular 8, nous pouvons faire comme ceci:

import { Injectable } from '@angular/core';
import { YourModel} from '../models/<yourModel>.model';
import { UserService } from './user.service';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})

export class GlobalDataService {

  private me: <YourModel>;

  private meObservable: Observable<User>;

  constructor(private yourModalService: <yourModalService>, private http: HttpClient) {

  }

  ngOnInit() {

  }


  getYourModel(): Observable<YourModel> {

    if (this.me) {
      return of(this.me);
    } else if (this.meObservable) {
      return this.meObservable;
    }
    else {
      this.meObservable = this.yourModalService.getCall<yourModel>() // Your http call
      .pipe(
        map(data => {
          this.me = data;
          return data;
        })
      );
      return this.meObservable;
    }
  }
}

Vous pouvez l'appeler comme ceci:

this.globalDataService.getYourModel().subscribe(yourModel => {


});

Le code ci-dessus mettra en cache le résultat de l'API distante au premier appel afin qu'il puisse être utilisé sur d'autres demandes à cette méthode.

Raghav
la source