How to cache AngularJS ui-router resolve?

Question

Not sure if this is the best way to state the question but I only want the resolve to run once when I change the state. This is because I have multiple tabs and I need to use an AJAX call to get the data for the template. So when you click on a tab, I will store that information into the $scope. But I don't want to keep making this call if the user switches to another tab and goes back.

This is what my $stateProvider looks like right now:

  state('something', {
    views: {
      'filters.form': {
        templateUrl: '<%= asset_path('my_path.html') %>',
        controller: function($scope, sources){
          $scope.sources = sources;
        }
      }
    },
    resolve: {
      sources: function($http) {
        return $http.get('/sources').success(function(data){
          return JSON.parse(data.sources);
        });
      }
    }
  })

Which works great but everytime I switch tabs and come back, it makes another call which I don't want.

I tried to pass in the $scope into the resolve and checked to see if $scope.sources existed before I made an AJAX call but that didn't work.

I would move it to a service and have the service do the caching. — user400654
– user400654, Commented Aug 21, 2014 at 20:53

PSL · Accepted Answer · 2014-08-21 21:12:22Z

6

I would just move it in a service and cache it and inject it in the resolve.

app.service('SourceService',['$http', function(){ 
  var _cachedPromise;
  this.getSources = function(){
     return _cachedPromise || _cachedPromise = $http.get('/sources').then(function(result){
          //return result.data.sources //If the data is already an object which most possibly is just do 
          return JSON.parse(result.data.sources);
      });
  }
}]);

Now in the resolve do:-

 resolve: {
      sources: function(SourceService) {
        return SourceService.getSources();
      }
    }

or just do it in the resolve itself.

edited Aug 21, 2014 at 21:12

answered Aug 21, 2014 at 20:57

PSL

124k21 gold badges257 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dragonfly Over a year ago

I'm new to Angular so I'm a bit confused. How do I pass the SourceService into the resolve? I don't seem to have access to SourceService from the app.config. I tried to put it into the params but it didn't like that.

PSL Over a year ago

What happens when you do sources: function(SourceService) {

Collectives™ on Stack Overflow

How to cache AngularJS ui-router resolve?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related