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.

Answer 1

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.