/*global localStorage*/
/**
* The Cacher Module with the service CacheLocal
*/
angular.module('Cacher', []).
factory('CacheLocal', function($cacheFactory) {
var cache = $cacheFactory('someCache', {});
var PREFIX = 'Cacher::';
cache.get = function(key) {
console.log('get', key);
var lruEntry = localStorage.getItem(PREFIX + key);
if (!lruEntry) return; // Cache miss
lruEntry = JSON.parse(lruEntry);
console.log('hit', lruEntry);
return lruEntry.data; // Cache hit
};
cache.put = function(key, value) {
if (typeof value.then === 'function') {
value.then(function(value) {
localStorage.setItem(PREFIX + key, JSON.stringify(value));
});
} else {
localStorage.setItem(PREFIX + key, JSON.stringify(value));
}
};
cache.remove = function(key) {
localStorage.removeItem('Cacher::' + key);
};
cache.removeAll = function() {
localStorage.clear();
};
return cache;
});
var app = angular.module('Test', ['Cacher'])
.factory('AJAX', function($http, CacheLocal) {
return {
getWord: function(file) {
var promise = $http.get(file, {
cache: CacheLocal
}).then(function(d) {
return d.data;
});
return promise;
}
};
})
.controller('MainCtrl', function($scope, AJAX) {
$scope.obj = {
filename: 'test.txt',
result: ''
};
$scope.refresh = function() {
if (!this.obj.filename) return;
this.obj.result = AJAX.getWord(this.obj.filename);
};
$scope.refresh();
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<script>document.write("<base href=\"" + document.location + "\" />");</script>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-app="Test" ng-controller="MainCtrl">
<h3>Cached $http Requests</h3>
File to load: <input ng-model="obj.filename" placeholder="filename">
<button ng-click="refresh()">Load</button>
<div>
<h3>Result:</h3>
<textarea>{{obj.result}}</textarea>
</div>
</div>
</body>
</html>
/* Put your css in here */