AngularJS: $cacheFactory example
Example implementation of $cacheFactory service and available methods
by masudcsesust04
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap.min.css">
<div ng-app="cacheApp" ng-controller="AppCtrl">
<div class="row-fluid">
<div class="span10">
<form class="form-search no-bottom-margin" data-ng-submit="addGroup(group)" autocomplete="on">
<div class="input-append">
<input type="text" class="span12 search-query" data-ng-model="group.name" placeholder="Add Group" data-ng-required />
<button type="submit" class="btn btn-inverse"><i class="icon-plus"></i></button>
</div>
</form>
</div>
</div>
<div class="row-fluid">
<div class="span10">
<form class="form-search no-bottom-margin" data-ng-submit="getGroup(key)" autocomplete="on">
<div class="input-append">
<input type="text" class="span12 search-query" data-ng-model="key" placeholder="Get Group" data-ng-required />
<button type="submit" class="btn btn-inverse"><i class="icon-plus"></i></button>
</div>
</form>
</div>
</div>
<button class="btn" ng-click="removeCache()">Remove</button>
<pre>{{hello}}</pre>
</div>
JavaScript
'use strict';
var app = angular.module("cacheApp", ['app.services']);
app.controller('AppCtrl', function($scope, APPCache){
var id = 0;
$scope.addGroup = function(group){
console.log(group);
APPCache.put(angular.lowercase(group.name), group);
id += 1;
};
$scope.getGroup = function(key){
console.log('GET', key);
console.log('Cahce', APPCache.get(angular.lowercase(key)));
};
$scope.removeCache = function(){
APPCache.remove("masud");
};
$scope.hello = "Hello";
});
var app_services = angular.module('app.services', []);
app_services.factory('APPCache', function($cacheFactory) {
return $cacheFactory('APPCache', {
capacity: 50
});
});