javascript - Caching multiple data in Angular $cacheFactory? - Stack Overflow

admin管理员组

文章数量:1390812

I'm new to angular and I need to cache data to increase the performance. For this I'm using $cacheFactory by Angular.

When I try,

myApp.factory('myCache', function($cacheFactory) {
 return $cacheFactory('myData');
});

With

myApp.controller('MyMain', ['$scope', '$http', 'myCache',
 function ($scope, $http, myCache) {
   var cache = myCache.get('myData');
   if (cache) {
     $scope.variable = cache;
   }
   else {
     $http.get('')
       .success(function(data) {
         $scope.variable = data;

         myCache.put('myData', data);
       }
    );
  }
}

This works fine, but it only caches one set of data, as I want to cache multiple set of data I uses

myApp.factory('myCache', function($cacheFactory) {
 return {
  get : function(cacheKey){
    return $cacheFactory(cachekey);
     }
   }
});

So if I go to another page I can cache another set of data like this,

myApp.controller('MyMain', ['$scope', '$http', 'myCache',
 function ($scope, $http, myCache) {
   var cache = myCache.get('myData2');
   if (cache) {
     $scope.variable = cache;
   }
   else {
     $http.get('')
       .success(function(data) {
         $scope.variable = data;

         myCache.put('myData2', data);
       }
    );
  }
}

etc.

However in the latter way although it doesn't give any error no data is returned and no ajax call is made to cache the data.

How can I fix this? And cache multiple sets of data using $cacheFactory?

I'm new to angular and I need to cache data to increase the performance. For this I'm using $cacheFactory by Angular.

When I try,

myApp.factory('myCache', function($cacheFactory) {
 return $cacheFactory('myData');
});

With

myApp.controller('MyMain', ['$scope', '$http', 'myCache',
 function ($scope, $http, myCache) {
   var cache = myCache.get('myData');
   if (cache) {
     $scope.variable = cache;
   }
   else {
     $http.get('http://www.example./path/to/api/endpoint')
       .success(function(data) {
         $scope.variable = data;

         myCache.put('myData', data);
       }
    );
  }
}

This works fine, but it only caches one set of data, as I want to cache multiple set of data I uses

myApp.factory('myCache', function($cacheFactory) {
 return {
  get : function(cacheKey){
    return $cacheFactory(cachekey);
     }
   }
});

So if I go to another page I can cache another set of data like this,

myApp.controller('MyMain', ['$scope', '$http', 'myCache',
 function ($scope, $http, myCache) {
   var cache = myCache.get('myData2');
   if (cache) {
     $scope.variable = cache;
   }
   else {
     $http.get('http://www.example./path/to/api/endpoint')
       .success(function(data) {
         $scope.variable = data;

         myCache.put('myData2', data);
       }
    );
  }
}

etc.

However in the latter way although it doesn't give any error no data is returned and no ajax call is made to cache the data.

How can I fix this? And cache multiple sets of data using $cacheFactory?

• javascript
• angularjs
• caching

Share Improve this question Follow asked Dec 22, 2014 at 12:43 rkshrksh 4,0501010 gold badges5252 silver badges7272 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

If your URL is unique for the data that you are querying, then you should use the built in cache inside $http:

$http.get('http://www.example./path/to/api/endpoint', { cache: true }).success(...

This will cache based on the uniqueness of the URL parameter in cacheProvider for you.

Here is the documentation for this functionality.

本文标签： javascriptCaching multiple data in Angular cacheFactoryStack Overflow