current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.3 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 2 down vote favorite
1

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');
            }

        });

    }]);
})();
share|improve this question
up vote 4 down vote

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.

share|improve this answer
    
cool that works, thanks a lot – user2994560 Feb 28 '15 at 2:11
up vote 1 down vote

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)

share|improve this answer
up vote 1 down vote

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
});
share|improve this answer
up vote 0 down vote 
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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.