AngularJS Service Singleton?

Question

I'm fairly new to angularJS but I've read that services should be singleton. However, it wont' work. Here is my service:

 .factory('TrainingPlan', function($http, SERVER){

   var o = {
     exercises: [],
     planID : 0
   };

   o.init = function(){
     if(o.exercises.length == 0)
      return o.getAllExercises();
   };

   o.getAllExercises = function(){
     $http({
       method: 'GET',
       url: SERVER.url + 'listener.php?request=getAllExercises&planID=' + o.planID
     }).then(function(data){

       o.exercises = angular.copy(o.exercises.concat(data.data));

       console.log("Exercises in Trainingplan Services");
       console.log(o.exercises);

       return o.exercises;
     })
     ;
   };

   o.getExercise = function(exerciseID){
     for(var i = 0; i < o.exercises.length; i++){
       if(o.exercises[i].exerciseID == exerciseID)
       {
         return o.exercises[i];
       }
     }
   };

  return o;
 })

And I have two Controllers:

  .controller('TrainingDetailCtrl', function($scope, $stateParams, TrainingPlan, $timeout) {
   TrainingPlan.init();
    $timeout(function(){
      $scope.exercises = TrainingPlan.exercises;
      $scope.numberOfUnfishedExercises = $scope.exercises.length;
      button.innerHTML = "asdf";
    }, 250);
  })

(I haven't copied the whole controller, but it works so far...)

  .controller('TrainingHistoryEditCtrl', function($scope, $stateParams, TrainingPlan, $timeout) {
    var exerciseID = $stateParams.exerciseID;


    $scope.currentExercise = TrainingPlan.getExercise(exerciseID);
    console.log($scope.currentExercise);
  })

So actually I go from TrainingDetailCtrl where I have all the exercises of 'TrainingPlan'. However, when I change the sites, TrainingPlan has no exercises anymore when I wont to use them in TrainingHistoryEditCtrl.

***AngeluarJS Service Singleton? --> 1000% Universal truth*** — Deepak Ingole, Aug 29 '15 at 12:57
I think you should read more about service in angular. Please read this answer [Difference between service, factory and provider](http://stackoverflow.com/questions/15666048/service-vs-provider-vs-factory) — severin.julien, Aug 29 '15 at 13:01
@user2529173 Can you please explain what you mean by 'when I change the sites' in your last paragraph? — lisimba.gilkes, Aug 29 '15 at 13:27
I'm sorry, I'm not that good at explaining things. I have two different views. The first one uses the TrainingDetailCtrl. There I call the TrainingPlan.init() and it works fine. When I change the view and use TrainingHistoryEditCtrl, the 'exercises' array of TrainingPlan is empty. But if it's a singleton it should still have data right? — user2529173, Aug 29 '15 at 13:27
You should just use the caching functionality in $http instead of trying to create your own. — Martin, Aug 29 '15 at 17:49

score 0 · Answer 1 · answered Aug 29 '15 at 17:43

That is because your $http issues an async call. Even if you call init, actually when the code runs to the line $timeout(function(){.., the result may not arrive yet.

Please check this demo: JSFiddle. Wait for 10 seconds then the value is not empty.

Solution: return a promise from the factory. Inside the controller use then to pass in callback function.

AngularJS Service Singleton?

1 Answers1