在 http 中添加缓存非常简单。 （通过传递 cache=true ）
http://docs.angularjs.org/api/ng.$http 有缓存选项。
如何在 angularjs 中的 $resource 中添加类似的功能？
【问题讨论】：
标签： javascript angularjs
从 1.1.2 (commit) 开始，所有的 $httpConfig 选项都直接暴露在 $resource 操作对象中：
return {
Things: $resource('url/to/:thing', {}, {
list : {
method : 'GET',
cache : true
}
})
};
【讨论】：
在 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;
}
};
});
【讨论】：
正如文档所述，$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 }
});
});
【讨论】：
这里似乎没有提到，但你也可以覆盖默认方法。
app.factory("List", ["$resource", function($resource) {
return $resource("./lists/:path/:action.json", {}, {
get: {
method: "GET",
cache: true
}
});
}]);
【讨论】：
cache: true 的问题在于它只缓存 GET 请求。如果你想缓存 HEAD 请求，那你就不走运了。
您还可以为 $http 设置默认缓存，从而为基于它的 $resource 设置默认缓存。
我的设置与出色的 angular-cache 允许 LocalStorage 并符合 $cacheFactory：
app.run(function($http, DSCacheFactory) {
DSCacheFactory('defaultCache', {
deleteOnExpire: 'aggressive',
storageMode: 'localStorage'
});
$http.defaults.cache = DSCacheFactory.get('defaultCache');
});
【讨论】：
查看 angular-resource 源表明以当前编写的方式无法触发缓存。
这是来自源的请求对象：
$http({
method: action.method,
url: route.url(extend({}, extractParams(data), action.params || {}, params)),
data: data
}).then(...)
有几种可能的方法来处理这个问题。
首先，您可以使用客户端持久性在本地缓存。我将amplify.store 与包装器一起使用（b/c 我不太喜欢 API 语法）。根据您要查找的内容以及您的目标浏览器，还有多种其他存储解决方案。也有不少人使用lawnchair。
然后，您可以在本地对模型进行字符串化和存储，并根据您想要的任何规则或时间限制对其进行更新。
另一种解决方案是简单地修改角度资源以接受您正在寻找的参数。这可以很简单（只需向 $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 的优点之一是在转换参数时所有的字符串插值都为您工作。但是，如果需要，您当然可以使用此逻辑进行解析，或者根据您使用的模型编写自己的逻辑。
【讨论】：
我刚刚遇到了这个经过深思熟虑的模块，称为 angular-cached-resource，它将为您完成这项工作。 https://github.com/goodeggs/angular-cached-resource
它是 $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.');
});
代码中唯一的区别是：
entries），以便您可以
即使在页面刷新或重新加载之间也可以参考它。这些条目
开箱即用，因为它使用 localStorage。另请注意 Angular 2.0 可能支持这样的开箱即用：https://docs.google.com/document/d/1DMacL7iwjSMPP0ytZfugpU4v0PWUK0BT6lhyaVEmlBQ/edit
【讨论】：
我正在使用 angular-resource 1.5.5 并按以下方式设置我的代码：
将 action 设置为 query，并且由于“query”操作需要反序列化为数组的响应，因此需要将 isArray 显式设置为 true。我的理解是默认情况下 ngResource 操作期望除查询之外的对象。 See here
控制器
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
}}),
}
}]);
【讨论】：