AngularJS $ http vulnerability in multiple controllers

Question

I have an application in which I upload a bunch of albums in one part, and then when the user clicks on each individual album, they get details for the album, such as songs, etc. Right now I am pulling out data from the database, but doing it twice, once in ProjectsCtrl to show all albums, and then again in ProjectDetailCtrl for individual album information. I feel that there is a faster way to do this, but I can’t figure out how to save the data the first time, to use the second controller again

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

        });

    }]);
})();

Answer 1

$http.get('/get_albums') , , , :

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

, .

, factory, , .

Answer 2

$rootScope

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

, :

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

:

ngRoute ( )

Answer 3

Yep, service factory . , , . .

As an easier way, you can simply use $ rootScope. It is available in all of your controllers that you want.

You just need to enter it into the controller or into the application 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
});

Answer 4

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 enable this service in the controllers and use them to get a list of albums and one album