javascript - sintaxis - angularjs: ¿cómo agregar almacenamiento en caché al objeto de recurso?

ng controller que es

Question

Añadir caché dentro de http es bastante sencillo. (pasando caché = verdadero)

http://docs.angularjs.org/api/ng.$http tiene la opción de caché.

¿Cómo agrego funcionalidad similar en $ resource en angularjs?

Answer 1

Acabo de encontrar este módulo muy bien pensado llamado recurso de almacenamiento en caché angular que hará el trabajo por usted. https://github.com/goodeggs/angular-cached-resource

Es un reemplazo del reemplazo de $ resource, con una funcionalidad adicional de administración de caché usando localStorage. Si su navegador no admite el almacenamiento local, no obtendrá ningún beneficio de almacenamiento en caché. Aquí hay un ejemplo de cómo puedes usarlo:

La forma antigua usando $ resource:

var Entry = $resource(''/entries/:slug'', {slug: ''@slug''});

var announcement = new Entry();
announcement.slug = ''announcing-angular-cached-resource'';
announcement.title = ''Announcing Angular Cached Resource'';
announcement.body = ''Here is why Angular Cached Resource is awesome!'';

announcement.$save(function() {
  alert(''Saved announcement.'');
});

La nueva forma usando $ cachedResource:

var Entry = $cachedResource(''entries'', ''/entries/:slug'', {slug: ''@slug''});

var announcement = new Entry();
announcement.slug = ''announcing-angular-cached-resource'';
announcement.title = ''Announcing Angular Cached Resource'';
announcement.body = ''Here is why Angular Cached Resource is awesome!'';

announcement.$save(function() {
  alert(''Saved announcement.'');
});

Las únicas diferencias en el código son:

1. Use $ cachedResource en lugar de $ resource
2. Proporcione una "clave" ( entries en el ejemplo anterior) para que pueda consultarla incluso entre actualizaciones de página o recargas. Estas entradas persisten ya que, de forma inmediata, utiliza localStorage.

Un tutorial detallado está disponible aquí: https://github.com/goodeggs/bites/blob/master/src/documents/open_source/2014-04-24-angular-cached-resource.md

También tenga en cuenta que Angular 2.0 puede admitir algo así de manera inmediata: https://docs.google.com/document/d/1DMacL7iwjSMPP0ytZfugpU4v0PWUK0BT6lhyaVEmlBQ/edit

Answer 2

Como el estado de los documentos, $resource tiene soporte incorporado para $cacheFactory . Puede pasarlo a través de la propiedad de cache de cada acción:

cache - {boolean|Cache} - Si es true , se usará un caché $http predeterminado para almacenar en caché la solicitud GET ; de lo contrario, si se $cacheFactory una instancia de caché con $cacheFactory , este caché se usará para el almacenamiento en caché.

Ejemplo de uso:

app.factory(''Todos'', function($resource, $cacheFactory) {
    var todosCache = $cacheFactory(''Todos'');
    return $resource(apiBaseUrl + ''/todos/:id'', {id: ''@id''}, {
        ''get'': { method:''GET'', cache: todosCache},
        ''query'': { method:''GET'', cache: todosCache, isArray:true }
    });
});

Answer 3

Desde la versión 1.1.2 ( commit ), todas las opciones $ httpConfig se exponen directamente en los objetos de acción $ resource:

return {
  Things: $resource(''url/to/:thing'', {}, {
    list : {
      method : ''GET'',
      cache : true
    }
  })
 };

Answer 4

Esto no parece mencionarse aquí, pero también puede sobrescribir los métodos predeterminados.

app.factory("List", ["$resource", function($resource) {
    return $resource("./lists/:path/:action.json", {}, {
        get: {
            method: "GET",
            cache: true
        }
    });
}]);

Answer 5

Estoy usando angular-resource 1.5.5 y configuro mi código de la siguiente manera:

Resumen

Establezca la acción como consulta , y dado que la acción "consulta" está esperando una respuesta deserializada como una matriz, isArray tendrá que establecerse explícitamente en verdadero. Mi comprensión es, por defecto, las acciones ngResource esperan objetos, excepto la consulta. Mira aquí

Controlador

angular.module("app")
    .controller(''myCtrl'',[''$scope'',''myService'',function($scope, myService) {
        $scope.myData= myService.myResource.query();
    }]);

Servicio

angular.module(''app'')
    .factory(''myService'',[''$resource'',function($resource){
        var baseUrl = ''http://www.MyExample.com/'';
        return{
            myResource:$resource(baseURL + ''/myEndpoint/:id'', {id:''@id''},{
                ''query'':{
                    method:''GET'',
                    cache:''true'',
                    isArray:true
                }}),
        }
    }]);

Answer 6

Implementar su propio caché en AngularJs es bastante fácil. Solo usa $cacheFactory :

app.factory(''myService'', function($resource, $cacheFactory) {
   var cache = $cacheFactory(''myService'');
   var User = $resource(''/user/:userId'', {userId:''@id''});

   return {
      getResource: function(userId) {
         var user = cache.get(userId);
         if (!user) {
            user = User.get({userId:userId});
            cache.put(userId, user);   
         }
         return user;
      }
   };
});

Answer 7

Mirar la fuente de recursos angulares indica que no es posible activar el almacenamiento en caché con la forma en que está escrito actualmente.

Aquí está el objeto de solicitud de la fuente:

$http({
    method: action.method,
    url: route.url(extend({}, extractParams(data), action.params || {}, params)),
    data: data
 }).then(...)

Hay algunas maneras potenciales de lidiar con esto.

Primero, puedes cachear localmente usando la persistencia del lado del cliente. Uso amplify.store con wrapper (b / c no me gusta mucho la sintaxis de la API). Hay una variedad de otras soluciones de almacenamiento en función de lo que está buscando y de cuál es la orientación de su navegador. Algunas personas también usan una lawnchair .

Luego puede alinear y almacenar sus modelos localmente y actualizarlos según las reglas o los límites de tiempo que desee.

Otra solución es simplemente modificar el recurso angular para aceptar los parámetros que está buscando. Esto podría ser tan simple (simplemente agregue un argumento adicional a $ resource) o complejo como lo necesite.

p.ej

function ResourceFactory(url, paramDefaults, actions, cache) {
   ...
   var cache = cache != null ? cache : false; // Set default to false
   $http({
        method: action.method,
        url: route.url(extend({}, extractParams(data), action.params || {}, params)),
        data: data,
        cache: cache
    }).then(...)       
}

Finalmente, dependiendo de sus requisitos, podría ser significativamente más fácil simplemente crear su propio recurso, usando angular.factory para crear un servicio. Una de las ventajas de ngResource es que hace todo el trabajo de interpolación de cadenas para usted al traducir los parámetros. Sin embargo, puede seguir esta lógica para analizarla si la necesita, o escribirla según los modelos que esté usando.

Answer 8

También puede configurar la memoria caché predeterminada para $ http y, por lo tanto, para $ resource que se basa en ella.

Mis configuraciones con el excelente angular-cache permite LocalStorage y compatible con $ cacheFactory:

app.run(function($http, DSCacheFactory) {

    DSCacheFactory(''defaultCache'', {
        deleteOnExpire: ''aggressive'',
        storageMode: ''localStorage'' 
    });

    $http.defaults.cache = DSCacheFactory.get(''defaultCache'');
});