$http POST & $http GET in 1 service

Question

I want create 1 service where i can POST the data and on success i can again GET the data and update the $scope.variable??

How to do that? I've tried this way:

angular.module('mvc')
.factory('ajaxService', function($http) {
    return {
        getAjaxData: function(response) {
            $http.get(url).success(response);
            return response;
        },

        postAjaxdata: function(postData){
            $http({
                method: "post",
                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                url: url,
                data: data
            })
            .success(function(response){
                ajaxService.getAjaxData(function(response) {
                    $scope.foo = response;
                });
            });
        }
    }
});

Answer 1

The main issue is that you can't set scope variables in the way you attempted to from the service.

You could instead use the $q service to return a promise which, when resolved, is set to your $scope.foo variable:

.factory('ajaxService', function($http, $q) {

    var ajaxService = {
        getAjaxData: function() {
            return $http.get(url);
        },
        postAjaxdata: function(postData){
            var deferred = $q.defer();
            $http({
                method: "post",
                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                url: url,
                data: postData
            })
            .success(function(){
              deferred.resolve(ajaxService.getAjaxData());
            });
            return deferred.promise;
        }
    };

    return ajaxService;
});

You'll also notice that I set the body of your factory to a named variable, which you can then use to call functions internally (as you did with ajaxService.getAjaxData()) before returning.

Then, in your controller, you could set your scope variable like this:

.controller('MyController', function($scope, ajaxService){
  ajaxService.postAjaxdata().then(function(results){
    $scope.foo = results.data;
  })
})

Working Plunker

Note: my answer is not entirely dissimilar to Anthony Chu's. I noticed that he posted his just before mine, but I went ahead anyway since mine takes a slightly different approach, utilizing promises instead of callbacks.

Answer 2

Capture this in postAjaxdata() to be used in the success callback to call getAjaxData().

You don't have access to the scope inside of the service (nor do you want to access it from a service). The Angular convention is to return a promise to the controller so that it can apply the response value to the scope when the promise is resolved. You can also do this using callbacks (to be consistent with the code that was posted). Here, I've added a callback to postAjaxdata()...

angular.module('mvc')
.factory('ajaxService', function($http) {
    return {
        getAjaxData: function(successCallback) {
            $http.get(url).success(successCallback);
            return successCallback;
        },

        postAjaxdata: function(postData, successCallback){
            var that = this;
            $http({
                method: "post",
                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                url: url,
                data: data
            })
            .success(function(){
                that.getAjaxData(successCallback);
            });
        }
    }
});

The controller should look something like this...

function controller ($scope, ajaxService) {

    // ...

    ajaxService.postAjaxdata(postData, function (response) {
        $scope.foo = response;
    });
}