Angular 1.5 - passing http post response to controller

Question

I am trying to pass an http response from my controller to a service, it works well except for getting the response to go into the controller here is my code below:

For my service

app.factory('ApiService',function($http,Config,$q){

 return {
 	login: function(payload,callBack){
 		var deferred = $q.defer();
		$http({
	        method:'POST',
	        url:Config.baseUrl + '/api/login',
	        data:payload,
	        headers: {'Content-Type': 'application/json'},
	      }).then(function successCallback(callBack){
	      	 console.log(callBack);
	      	 return deferred.resolve(callBack);
	      }, function errorCallback(callBack){
	      	 //deferred.reject(error);
	      	 console.log(callBack);
	      	 return deferred.reject(callBack);
	      });
	      return deferred.promise;
      }
 }

});

and for the Controller

app.controller('LoginCtrl', function($scope,$position,$rootScope,$state,ApiService) {


    $scope.forms = {
      'loginForm':''
    }  

    var payload ={
      'username':'',
      'password':''
    }
  	
  	$scope.userLogin = function(form){

      $scope.username = form.username.$modelValue;
      $scope.password = form.password.$modelValue;

      payload ={
        "username":$scope.username,
        "password":$scope.password
      }

      ApiService.login(payload, function(result){
        console.log(result);
      }

      
  	

  });

Now I don't understand because when I console.log() the response I'm able to see it in the service but doing the same on the controller I'm getting nothing.

Answer 1

No need to make it complex. Simply return promise from factory and use it in controller.

factory:

app.factory('ApiService',function($http,Config,$q) {    
   return {
        login: function(payload) {
            return $http({
                method:'POST',
                url:Config.baseUrl + '/api/login',
                data:payload,
                headers: {'Content-Type': 'application/json'},
              });
          }
        }
    });

in controller :

 ApiService.login(payload).then(function(data){
      // use response data    
   }, function(error) {
      // handle error
 });

Answer 2

You should use it like this:

 ApiService.login(payload).then(function(result){
    console.log(result);
  });

Because you are returning a promise in your service. Also you don't need that callback parameter, because the then method on the promise is your callback when it finishes and you can access the data your resolve it with.

app.factory('ApiService',function($http,Config,$q){

return {
login: function(payload){
    var deferred = $q.defer();
    $http({
        method:'POST',
        url:Config.baseUrl + '/api/login',
        data:payload,
        headers: {'Content-Type': 'application/json'},
      }).then(function (result){             
         return deferred.resolve(result);
      }, function (result){
         return deferred.reject(result);
      });
      return deferred.promise;
  }
 }
});