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

<pre name="code" class="js">
$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

« Previous