Angularjs: как добавить кеширование в ресурсный объект?

Ответ 1

Начиная с версии 1.1.2 (commit), все параметры $httpConfig отображаются непосредственно в объектах действий $resource:

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

Ответ 2

Реализация собственного кеша в AngularJs довольно проста. Просто используйте $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;
      }
   };
});

Ответ 3

Как указано в документах, $resource имеет встроенную поддержку $cacheFactory. Вы можете передать его через свойство cache для каждого действия:

cache - {boolean|Cache} - Если true, кеш-память по умолчанию $http будет использоваться для кэширования запроса GET, иначе, если экземпляр кеша, построенный с помощью $cacheFactory, этот кеш будет использоваться для кэширование.

Пример использования:

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

Ответ 4

Здесь не упоминается, но вы также можете перезаписать методы по умолчанию.

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

Ответ 5

Вы также можете установить кеш по умолчанию для $http и, следовательно, для $resource, который основан на нем.

Мои настройки с отличным angular-cache позволяют LocalStorage и совместимы с $cacheFactory:

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

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

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

Ответ 6

Глядя на источник angular -resource, указывает, что запуск кэширования невозможен с тем, как он записывается в настоящее время.

Здесь объект запроса из источника:

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

Есть несколько возможных способов борьбы с этим.

Сначала вы можете кэшировать локально, используя настойчивость на стороне клиента. Я использую amplify.store с оберткой (b/c Мне не очень нравится синтаксис API). В зависимости от того, что вы ищете, и какого браузера вашего таргетинга существует множество других решений для хранения. Довольно много людей используют lawnchair.

Затем вы можете локализовать и хранить свои модели локально и обновлять их на основе любых правил или временных ограничений, которые вы хотите.

Другим решением является просто изменить ресурс angular, чтобы принять параметры, которые вы ищете. Это может быть просто (просто добавьте дополнительный аргумент в $resource) или сложный, как вам нужно.

например.

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(...)       
}

Наконец, в зависимости от ваших требований, может быть значительно проще просто создать свой собственный ресурс, используя angular.factory для создания службы. Одним из преимуществ ngResource является то, что вся строка интерполяции работает для вас при переводе параметров. Тем не менее, вы можете наверняка решить эту логику для синтаксического анализа, если вам это нужно, или написать свой собственный на основе моделей, которые вы используете.

Ответ 7

Я просто наткнулся на этот действительно продуманный модуль под названием angular -cached-resource, который выполнит эту работу за вас. https://github.com/goodeggs/angular-cached-resource

Это замена замены ресурса $с добавленной функциональностью управления кешем с помощью localStorage. Если ваш браузер не поддерживает локальное хранилище, вы не получите никакой выгоды от кеширования. Вот пример того, как вы можете его использовать:

Старый способ использования $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.');
});

Новый способ использования $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.');
});

Единственными отличиями в коде являются:

• Используйте $cachedResource вместо $resource
• Предоставьте "ключ" (entries в приведенном выше примере), чтобы вы могли обратитесь к нему даже между обновлениями страницы или перезагрузкой. Эти записи сохраняются, поскольку из коробки он использует localStorage.

Подробное руководство доступно здесь: https://github.com/goodeggs/bites/blob/master/src/documents/open_source/2014-04-24-angular-cached-resource.md

Также обратите внимание, что Angular 2.0 может поддерживать что-то вроде этого из коробки: https://docs.google.com/document/d/1DMacL7iwjSMPP0ytZfugpU4v0PWUK0BT6lhyaVEmlBQ/edit

Ответ 8

Я использую angular -resource 1.5.5 и устанавливаю свой код следующим образом:

Резюме

Задайте действие как запрос, и поскольку действие "запрос" ожидает отступления десериализованного ответа как массив, для isArray должно быть явно установлено значение true. Я понимаю, что по умолчанию действия ngResource ожидают объекты, кроме запроса. Смотрите здесь

контроллер

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

Сервис

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