AngularJS $cacheFactory Service
The AngularJS $cacheFactory is used to construct cache objects and store key value info into the cache object. The $cacheFactory provides put, get, remove and filter methods which helps to add key value into the cache and get back value based on provided key.
Syntax
$cacheFactory(cacheId, [options]);
AngularJS $cacheFactory Service Example
<!DOCTYPE html>
<html>
<head> <!-- www.techstrikers.com -->
<title>AngularJS $catchFactory Example</title>
<script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
<script>
var app = angular.module("InjectorInitialization",[]);
app.controller("CatchFactoryController",['$scope','$cacheFactory', function ($scope,$cacheFactory) {
$scope.key = "";
$scope.value = "";
$scope.currentItem = "";
$scope.keys = [];
$scope.cache = $cacheFactory('testCache');
$scope.addItems = function(){
$scope.keys.push($scope.key);
$scope.cache.put($scope.key,$scope.value);
};
$scope.getItem = function(){
$scope.currentItem = $scope.cache.get($scope.key);
};
$scope.removeItem = function(){
$scope.keys = $scope.keys.filter(function(key){
return (key !== $scope.key);
});
$scope.cache.remove($scope.key);
};
}]);
</script>
</head>
<body style="background-color:#DDE4E9;font-family:arial;" ng-app="InjectorInitialization">
<fieldset style="background-color:#DDE4E9;">
<legend>AngulerJS $catchFactory Example</legend>
<div ng-controller="CatchFactoryController">
<p>Key: <input type="text" ng-model="key"></p>
<p>Value: <input type="text" ng-model="value"></p>
<p><button ng-click="addItems()">Add Items</button></p>
<p>Get Item:
<input type="text" ng-model="key">
<button ng-click="getItem()">Get Items</button><br/>
<p style="font-family:Arial;color:yellow;background:steelblue;padding:3px;width:350px;">Item: {{currentItem}}</p>
</p>
<p>Remove Item:
<input type="text" ng-model="key">
<button ng-click="removeItem()">Remove Items</button>
</p>
</div>
</fieldset>
</body>
</html>
See Live Example
