Cache Data with $resource promises pattern

Question

Assuming my service is returning a promise from a $resource get, I'm wondering if this is the proper way to cache data. In this example, after hitting the back arrow and returning to the search results, I don't want to query the webserver again since I already have them. Is this the proper pattern to handle this situation? The example below is querying the Flixter (Rotten Tomatoes) Api.

Boilded down code:

Controller:

function SearchCtrl($scope, $route, $routeParams, $location, DataService) {
    DataService.search($routeParams.q).then(function(data){
       $scope.movies = data.movies;
    });
}

Service:

angular.module('myApp.services', []).
 factory('DataService', ['$q', '$rootScope', 'JsonService', function ($q, $rootScope, JsonService) {

  var movie = {};
  var searchResults = {};
  var searchq = '';
  var service = {

    search: function(q) {

        var d = $q.defer();
        // checking search query, if is the same as the last one, 
        //resolve the results since we already have them and don't call service
        // IS THIS THE CORRECT PATTERN
        if (q==searchq) {
           d.resolve(searchResults);              
        } else {
          // returns a $resource with defined getdata
          JsonService.search.movieSearch(q, 20, 1).getdata(function(data){
            searchResults = data;
            searchq = q;
            d.resolve(searchResults);
          });
        }
       return d.promise;

    },
      getSearchResults: function() {
        return searchResults;
      }
 };

 return service;
 }]);

I can't provide a working example as it would expose my API key.

Answer 1

I've faked out the actual ajax request but I think the general idea should apply, you can see the full demo here

Here is the controller, it just executes the search and then sets the results:

myApp.controller('MyCtrl', function($scope, DataService) {
     $scope.search = function(){
          DataService
              .search($scope.q)
              .then(function(response){
                  $scope.fromCache = response.fromCache;
                  $scope.results = response.results;
              });
      };
});

In the DataService I am just saving results into an object keyed off the query. It is simplistic but hopefully will get you started. You could save it in html5 storage or something if you want something like that.

You will need to put in your actual ajax call here, but the principle remains.

myApp.factory('DataService', function($q){
      var resultsCache = {};
      return {
          search: function(query){
              var deferred = $q.defer();
              if (resultsCache[query]) {
                  resultsCache[query].fromCache = true;
              }
              else {
                  resultsCache[query] = {results: [{name: 'result one'}, {name: 'result two'}]};
              }
              deferred.resolve(resultsCache[query]);
              return deferred.promise;
          }
      };
});

Hope that helps