AngularJS - How to cache service`s ajax result to reuse in controller

Question

I was recomended to use Angular services in order to centralize many repetative functions that were store in my controller, so I am rewriting my code using services now.

It seemed simple at first but cant seem to find a good structure to fetch my ajax data (only once), then store it in my service for my controller to reuse the cached data when ever it needs it. At the moment I keep getting errors saying: TypeError: Cannot read property 'sayHello' of undefined.

I believe this is because theres is a delay to fetch my ajax data via my service before the controller loads. Im not quite certain how I can optimize this. Would anyone have a better stucture to this?

Service: app.service('MyService', function ($http) {

    this.sayHello = function () {

        var deferred = $q.defer();

        $http({
            method: 'GET',  
            url: 'AJAX PATH',
            headers: { "Accept": "application/json;odata=verbose;charset=utf-8"} 
        }).then(function(data){

            var configurations = data;
            var configurations.data_result_1 = configurations.data_result_1.split("\r\n");
            var configurations.data_result_2 = configurations.data_result_2.split("\r\n");
            deferred.resolve(configurations);
        }

        return deferred.promise;
    };

    this.sayHello(); //Run the function upon page laod.

});

Controller:

app.controller('AppController', function (MyService, $scope) {

    $scope.configurations = null;
    $scope.configurations = function() { MyService.sayHello() }; 

});

There are issues in the code structure but not enough to cause that error. Are you sure this is the version that throws the error? — charlietfl
– charlietfl, Commented Jan 15, 2017 at 21:51
Perhaps look at using a CacheFactory for your response. Or specify caching in your http request, that way you can call it again and youll just be served the cache result rather than making another http request. docs.angularjs.org/api/ng/service/$http — haxxxton
– haxxxton, Commented Jan 15, 2017 at 22:17

Bri4n · Accepted Answer · 2017-01-16 03:37:48Z

I recommend you to use another way to declare the service:

 app.factory("MyService", function($http){
   var configurations = {};

 $http({
        method: 'GET',  
        url: 'AJAX PATH',
        headers: { "Accept": "application/json;odata=verbose;charset=utf-8"} 
    }).then(function(data){

         configurations = data;
         configurations.data_result_1 =                                              configurations.data_result_1.split("\r\n");
         configurations.data_result_2 = configurations.data_result_2.split("\r\n");

    });
 return {

  getConfigurations: function(){
    return configurations;
    }

}

In your controller you can use a $watch, then when the configurations objects changes you take the information:

 .controller("YourCtrl", function($scope,MyService){
   var vm = this;
   vm.configurations = {};

     $scope.$watchCollection(function () { return MyService.getConfigurations()},function(newValue){
  vm.configurations = newValue;
});

Sphinx117 · Accepted Answer · 2017-01-16 03:47:49Z

Totally agree with Bri4n about store configuration in the factory. Not agree about the controller because you said you don't want to watch, but only load data once.

But you $http already return a promise so as Brian said this is nice (just $q is useless here so you can delete it from injection). And I just wrapped http call in function, and the exposed function just check if configurations are already loaded. If yes, just return configurations else load it and then return it.

 app.factory("MyService", function($http,$q){
   var configurations = {};

 function loadConfig(){
 $http({
        method: 'GET',  
        url: 'AJAX PATH',
        headers: { "Accept": "application/json;odata=verbose;charset=utf-8"} 
    }).then(function(data){

         configurations = data;
         configurations.data_result_1 =                                              configurations.data_result_1.split("\r\n");
         configurations.data_result_2 = configurations.data_result_2.split("\r\n");

    });

} return {

  getConfigurations: function(){
    If( !!configurations ){
        return configurations;
    }
    //Else loadConfig.then return configurations 
    }

}

In your controller you can just get config without need to know if it is already loaded.

 .controller("YourCtrl", function(MyService){
   var vm = this;
   // If configurations already loaded return config, else load configurations and return configurations.
   vm.configurations = MyService.getConfigurations();

I write on my phone so my code is not perfect I can't write properly.

You still have to implement the commented line. //Else loadConfig.then return configurations

Arber Sylejmani · Accepted Answer · 2017-01-15 22:48:34Z

0

OK, on second thought, it looks like you are not using the dependency array notation properly. Change your code to:

app.service('MyService', ['$http', function ($http) {
  // do your stuff here
}]);

and for the controller:

app.controller('AppController', ['MyService', '$scope', function(MyService, $scope) {

 // do your stuff here

}]);

edited Jan 15, 2017 at 22:48

answered Jan 15, 2017 at 22:32

Arber Sylejmani

2,1081 gold badge16 silver badges20 bronze badges

3 Comments

charlietfl Over a year ago

service is clearly being injected in controller in OP code. Order not relevant due to bootstrapping of angular doesn't take place until dom content loaded which means all components will be registered before they get called upon

Arber Sylejmani Over a year ago

I'm not referring to "app.controller('AppController', function (MyService, $scope)", because I can clearly see he has injected it. I was saying Angular cannot find it to inject it to the controller, because the file containing the service code is probably linked AFTER the file with the controller

charlietfl Over a year ago

Would get an internal angular unknown provider error if that was the case and I don't think you understand the bootstrapping process and when it occurs

Collectives™ on Stack Overflow

AngularJS - How to cache service`s ajax result to reuse in controller

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related