AngularJS-如何缓存服务的ajax结果以在控制器中重用

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

});

Answer 1

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

Answer 2

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.

Answer 3

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

}]);