Caching data using $cacheFactory vs regular javascript variable AngularJS - angularjs

Question

The InvoiceModel below has a getByCustomer() function that lists the invoices for a given customer.
I'm just wondering what's the difference between caching data to a regular javascript variable compared to using $cacheFactory.
Regular Javascipt Variable:
angular.module('app', ['ngResource'])
.factory('Invoice', ['$resource',
function($resource) {
return $resource('http://foo.bar/invoices');
}
])
.factory('InvoiceModel', ['Invoice',
function(Invoice) {
var customer_invoices = [];
return {
getByCustomer: function(customer_id) {
if (customer_invoices[customer_id] == undefined) {
customer_invoices[customer_id] = Invoice.get({customer_id: customer_id});
}
return customer_invoices[customer_id];
}
};
}
]);
$cacheFactory
angular.module('app', ['ngResource'])
.factory('Invoice', ['$resource',
function($resource) {
return $resource('http://foo.bar/products');
}
])
.factory('InvoiceModel', ['Invoice', '$cacheFactory',
function(Invoice, $cacheFactory) {
var customerInvoicesCache = $cacheFactory('customerInvoicesCache');
return {
getByCustomer: function(customer_id) {
var invoices = customerInvoicesCache.get(customer_id);
if (!invoices) {
customerInvoicesCache.put(Invoice.get({customer_id: customer_id}));
}
return invoices;
}
};
}
]);

Answer 1

I wouldn't use a $cacheFactory in the fashion you have shown. You're kind of using it the way $http or $resource would use it internally.
Instead, you can configure an $http or $resource object to cache the responses for specific queries. You then merely use the $http or $resource as normal. It handles the caching for you.
Example with $resource:
.factory('Invoice', ['$resource',
function($resource) {
return $resource('http://foo.bar/products', {}, {
query: { cache: true }
});
}
])
The above overrides the query method of the resource to enable caching with the default $cacheFactory. The first time your code calls the query method the response will get cached. Any subsequent calls to the query method will use the cached response.
Example with $http:
$http.get('/the-url', { cache: true }).then(...)
// or by passing in your own cache factory
var cache = $cacheFactory('myCacheFactory');
$http.get('/the-url', { cache: cache }).then(...);
Clearing the cache:
When you need to clear the cache, you get the $cacheFactory and call it's remove() function to clear the cache for the associated URL:
// default cache factory
var defaultCache = $cacheFactory('$http');
defaultCache.remove('/some/url');
// custom cache factory
var cache = $cacheFactory('myCacheFactory');
cache.remove('/custom-cache-url');