AngularJS $http use response in multiple controllers

Question

I have an app where I am loading a bunch of albums in one partial and then when a user clicks on each individual album, they get details for the album like songs, etc. Right now I am pulling the data from database but doing it twice, once in ProjectsCtrl to show all the albums and then again in ProjectsDetailCtrl for the individual album info. I feel like there is a faster way to do this, but can't figure out how to save the data from the first time to use again in the 2nd controller

(function() {
    var app = angular.module('chp', ['ngRoute', 'projectControllers']);

    app.config(['$routeProvider',
      function($routeProvider) {
        $routeProvider.
          when('/', {
            templateUrl: 'partials/directory.html',
            controller: 'ProjectsCtrl'
          }).
          when('/album/:slug', {
            templateUrl: 'partials/album.html',
            controller: 'ProjectDetailCtrl'
          }).
          otherwise({
            redirectTo: '/'
          });
      }]);

    var projectControllers = angular.module('projectControllers', []);

    projectControllers.controller('ProjectsCtrl', ['$scope', '$http',
      function ($scope, $http) {
        $http.get('/get_albums').success(function(albums) {
            $scope.projects = albums;
            $scope.filters = { };
        });
      }]);



    projectControllers.controller('ProjectDetailCtrl', ['$scope', '$http', '$routeParams', '$sce',
      function($scope, $http, $routeParams, $sce) {


        $http.get('/get_albums').success(function(albums) {
            $scope.projects = albums;

            for(var i = 0; i < $scope.projects.length; i++) {
                if($scope.projects[i].slug === $routeParams.slug){
                    $scope.album = $scope.projects[i];
                    $scope.albumIdx = i;
                    break;
                }
            }    

            $scope.project = albums[$scope.albumIdx];

            $scope.showVideo = function(id) {
                var videoCode = $(this)[0].song.video;
                // videoCode = '<iframe width="560" height="315" src="'+video+'" frameborder="0" allowfullscreen></iframe>';
                $('#myModal .flex-video').html(videoCode);
                $('#myModal .track-number').html('<span style="color: #f86081; display: inline-block; margin-right: 4px;">' + ($(this)[0].$index+1) + '.</span> ' + $(this)[0].song.title);
                $('#myModal').foundation('reveal', 'open');
            }

        });

    }]);
})();

score 5 · Answer 1 · answered Feb 28 '15 at 02:04

If $http.get('/get_albums') produces all of the data that you need for both controllers, then it sounds like you just need to use caching:

$http.get('/get_albums', { cache: true })....

Use that in both controllers and you'll only be hitting the server once.

Preferably, this would be placed in a factory so that the data retrieval logic is only in one place, but that's not an absolute requirement.

score 1 · Answer 2 · edited May 23 '17 at 12:34

I would go with either injecting $rootScope in both controllers

myApp.controller('controllerA', function($rootScope){
    $rootScope.sharedData = {album: ...};
    ...
});

Or creating a value and injecting it in both controllers to pass this data around:

myApp.value('myValues', '{sharedData: {}}');
myApp.controller('controllerA', function(myValues){
    myValues.sharedData.album = ...
    ...
});

This is basically the same question, and has a good answer and comments:

Best way to pass data between ngRoute controllers (from one view to the next)

score 1 · Answer 3 · edited Oct 07 '15 at 07:28

Yep, service or factory would be fine for this case. You could also store that previously entered data in local storage for example using that service. Basically it's better way for improvements in future.

As a simpler way, you can simply use $rootScope. It's available in all your controllers it you wish so.

Just need to inject it into controller or in the app itself.

app.controller('myCtrl', function($rootScope){
    $rootScope.myStoredValues = {...};
});

or

app.run(function($rootScope){
    $rootScope.root = $rootScope; 
    $rootScope.myStoredValues = {...};
    // this way you don't need to inject it into controller, 
    // it will be available there via $scope.root.myStoredValues
});

score 0 · Answer 4 · answered Feb 28 '15 at 02:30

app.factory('ProjectService', function ($http) {
  var projects = []
  return{

    getProjectList: function(){
      $http.get('/get_albums').success(function(albums) {
        projects = albums;
      });
    },

    getProject: function( id ){
      // here you can select the already existing project from the above list "projects" by using the Id passed
    }

  }

});

You can include this service in controllers and use them to get list of albums and single album

AngularJS $http use response in multiple controllers

4 Answers4