title: Implementing cache in a factory in AngularJS
body: <p>I'm currently attempting to implement a cache service in my angular application in order to reduce the workload on the end point and to (hopefully) see some slight, probably negligible load times on my interface.</p>
  
  <p>I've started by implementing my own <code>cacheService</code> which is pretty much a wrapper for <code>$cacheFactory</code></p>
  
  <pre><code>(function () {
      'use strict';
  
      angular
          .module('app')
          .factory('cacheService', cacheService);
  
      cacheService.$inject = ['$cacheFactory']
  
      function cacheService($cache) {
          return $cache('appCache');
      }
  })();
  </code></pre>
  
  <p>Then I have <code>datacontext</code> which is essentially a unit of work that consumes my <code>cacheService</code> and <code>$http</code> (I have several other "repositories" in there but only showed the one I'm attempting to get this to work with)</p>
  
  <pre><code>(function () {
      'use strict';
  
      angular
          .module('app')
          .factory('datacontext', datacontext);
  
      datacontext.$inject = ['$http', 'cacheService', '$q'];
  
      function datacontext($http, cache, $q) {    
          var rulesRepo = (function () {
              var repo = {
                  get: getRule,
                  getAll: getAll
              };
  
              return repo;
  
              function getRule(ruleId) {
                  // placeholder
              }
  
              function getAll() {
                  var deferred = $q.defer();
  
                  // check to see if we have data cached
                  var rules = cache.get('rules');
                  if (rules) { // if it's cached, return it
                      deferred.resolve(rules);
                  } else { // otherwise get the data from the API, cache it and return it
                      $http.get('/api/rules')
                          .then(function (response) {
                              cache.put('rules', response.data);
                              deferred.resolve(response.data);                            
                          });
                  }
                  return deferred.promise;
              }
          })();    
  
          var service = {
              rules: rulesRepo
          };
  
          return service;
      }
  })();
  </code></pre>
  
  <p>And then my angular controller that consumes <code>datacontext</code></p>
  
  <pre><code>(function () {
      'use strict';
  
      angular
          .module('app')
          .controller('HomeController', HomeController);
  
      HomeController.$inject = ['$scope', 'datacontext'];
  
      function HomeController($scope, context) {    
          context.rules.getAll()
              .then(
                  function (data) { // success
                      $scope.rules = data;
                  },
                  function (response) { // failure
                      console.log(response);
                  });
  
          activate();
          function activate() { }
      }
  })();
  </code></pre>
  
  <p>The issue I'm facing at the moment is, whenever I make the call to <code>context.rules.getAll()</code>, it always hits the <code>else</code> statement, meaning <code>rules</code> is undefined, so it never uses the cache, it just makes another call to my API, gets the data, caches it (that part works I have tested it by pulling from the cache directly after I put it in the cache), then returns the promise. Over and over.</p>
  
  <p>Can someone point out where I'm not understanding how this is supposed to work?</p>