An AngularJS module to interact with RESTful server-side data sources, even when the browser is offline. Uses HTML5 localStorage under the hood. Closely mimics the behavior of the core ngResource module, which it requires as a dependency.
- Provides a simple abstraction to retrieve and save objects from a RESTful server.
- Comes with a set of intelligent defaults that let you get started right away.
- Caches all requests, and returns them immediately from the cache if you request them again.
- Remmebers writes to the server, and adds them to the cache too.
- If a write fails, try it again periodically until it succeeds. (This even works if you refresh the page in between!)
- If you query for multiple resources in one request, each one is cached separately so you can request it from the cache individually, too.
- Works as a drop-in replacement for Angular's $resource module.
It looks like this sort of functionality might be built into the upcoming Angular 2.0. Check out the design document here.
// Register your module with ngCachedResource
angular.module('myApp', ['ngCachedResource']);
// Define a resource
var Article = $cachedResource('article', '/articles/:id', {id: "@id"});
// GET requests:
var a1 = Article.get({id: 1});
a1.$promise.then(function() {
console.log('From cache:', a1);
});
a1.$httpPromise.then(function() {
console.log('From server:', a1);
});
// POST/PUT/PATCH/DELETE requests:
var a2 = new Article({id: 2}); // *Note: setting the bound param (`id` in this case) is *required*
a2.title = "This article will be saved eventually...";
a2.body = "Even if the browser is offline right now.";
a2.$save();
a2.$promise.then(function() {
console.log('Article was successfully saved.');
});Read the tutorial on the Bites from Good Eggs blog.
*Note: Internally, $cachedResource keeps track of writes by bound params to ensure that it doesn't duplicate writes. If your bound param is null (say you're relying on the server to generate ids), then every write will replace the previous one. To avoid this undesirable scenario, simply ensure the id is set on the client, and you can safely ignore it on the server.
Bower:
bower install angular-cached-resourcenpm: (intended for use with browserify)
npm install angular-cached-resourceManual Download:
- development: angular-cached-resource.js
- production: angular-cached-resource.min.js
Provides a factory called $cachedResource:
$cachedResource(cacheKey, url, [paramDefaults], [actions]);-
cacheKey,
String
An arbitrary key that will uniquely represent this resource in localStorage. When the resource is instanciated, it will check localStorage for any -
url,
String
Exactly matches the API for theurlparam of the $resource factory. -
paramDefaults,
Object, (optional)
Exactly matches the API for theparamDefaultsparam of the $resource factory. -
actions,
Object, optional
Mostly matches the API for theactionsparam of the $resource factory. Takes an additonalcacheparam (Boolean, defaulttrue) that determines if this action uses caching.
A CachedResource "class" object. This is a swap-in replacement for an object
created by the $resource factory, with the following additional properties:
-
Resource.$clearCache( [options] )
Clears all items from the cache associated with this resource. Accepts one argument, described below.- options,
Object, optional
optionsmay contain the following keys:where, which will limit the resources that are cleared from the cache to only those whose keys are explicitly listed.wherecan be anArrayor anObject. If it is anObject, it will be treated like anArraycontaining only the providedObject. TheArrayshould containObjectsrepresenting cache keys that should be removed. Ifwhereis provided,exceptFormust not be provided.exceptFor, which will limit the resources that are cleared from the cache to all resources except for those whose keys are explicitly listed. Just likewhere,exceptForcan be anArrayor anObject. If it is anObject, it will be treated like anArraycontaining only the providedObject. TheArrayshould containObjects representing cache keys that should be kept. IfexceptForis provided,wheremust not be provided.isArray, a boolean. Default isfalse. Iftrue, then the function will treat thewhereorexceptForarguments as referring toArraycache key.clearChildren, a boolean. Default isfalse. Iftrue, andisArrayis alsotrue, then the function will clear theArraycache entry (or entries) as well as all of the instances that theArraypoints to.clearPendingWrites, a boolean. Default isfalse. Iftrue, then the function will also remove cached instances that have a pending write to the server.
- options,
In addition, the following properties exist on CachedResource "instance" objects:
-
resource.$promise
For GET requests, if anything was already in the cache, this promise is immediately resolved (still asynchronously!) even as the HTTP request continues. Otherwise, this promise is resolved when the HTTP request responds. -
resource.$httpPromise
For all requests, this promise is resolved as soon as the corresponding HTTP request responds.
Since there is a 5 megabyte limit on localStorage in most browsers, you'll probably want to actively manage the resource instances that are stored. By default, this module never removes cache entries, so you'll have to do this by hand. Here are the ways that you can accomplish this:
-
localStorage.clear()
Removes everything in localStorage. This will not break the behavior of this module, except that it will prevent any pending write from actually occurring. -
$cachedResource.clearCache()
Removes every single Angular Cached Resource cache entry that's currently stored in localStorage. It will leave all cache entries that were not created by this module. (Note: cache entries are namespaced, so if you add anything to localStorage with a key that begins withcachedResource://, it will get deleted by this call). It will also leave any resource instances that have a pending write to the server. -
$cachedResource.clearUndefined()
Removes every Angular Cached Resource cache entry corresponding to a resource that has not been defined since the page was loaded. This is useful if your API changes and you want to make sure that old entries are cleared away. -
$cachedResource.clearCache({exceptFor: ['foo', 'bar']})
Removes every Angular Cached Resource entry except for resources with thefooorbarkeys, or resource instances that have a pending write to the server. -
$cachedResource.clearCache({clearPendingWrites: true})
Removes every Angular Cached Resource entry, including those that have a pending write to the server.
If you have a "class" object that you've created with $cachedResource, then
you can also do the following:
-
CachedResource.$clearCache()
Removes all entries from the cache associated with this particular resource class, except for resource instances that have a pending write to the server. -
CachedResource.$clearCache({where: [{id: 1}, {id: 2}])
Removes two entries from the cache associated with this particular resource class; the ones with anidof 1 and 2. (This assumes thatparamDefaultshas anidparam.) -
CachedResource.$clearCache({exceptFor: {id: 1})
Removes all entries from the cache associated with this particular resource class, except for those with anidof 1. (This assumes thatparamDefaultshas anidparam.) -
CachedResource.$clearCache({exceptFor: {query: 'search string'}, isArray: true})
Removes all entries from the cache except those that were returned by the provided query parameters. -
CachedResource.$clearCache({clearPendingWrites: true})
Removes all instances of CachedResource from the cache, including those that have a pending write to the server.
Asking for a cached resource with get or query will do the following:
-
If the request has not been made previously, it will immediately return a
resourceobject, just like usual. The request will go through to the server, and when the server responds, the resource will be saved in a localStorage cache. -
If the request has already been made, it will immediately return a
resourceobject that is pre-populated from the cache. The request will still attempt to go through to the server, and if the server responds, the cache entry will be updated.
Updating a CachedResource object will do the following:
- Add the resource update action to a queue.
- Immediately attempt to flush the queue by sending all the network requests in the queue.
- If a queued network request succeeds, remove it from the queue and resolve the promises on the associated resources (only if the queue entry was made after the page was loaded)
- If the queue contains requests, attempt to flush it once per minute OR whenever the browser sends a navigator.onOnline event.
What if localStorage doesn't exist, or if the browser is out of space?
In either of these cases, $cachedResource will make sure all of your requests
still happen. Things end up working just like the $resource module, with
none of the caching benefits.
Please make sure you run the tests, and add to them unless it's a trivial change. Here is how you can run the tests:
npm install
npm test
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent