Controller not logging response from Nodejs using Angular $http service

Question

I created a form and onclick of the form i want to see the response from the server(nosejs). In Angular Controller Im calling the service. The response is visible when called from the service itself, but when called from the controller nothing shows up.

Controller:

MyApp.angular.controller("loginCtrl", function($scope, UserService){
    $scope.name = "TestName";

    $scope.check = function(user){

        UserService.createUser(user, function(response){
            $scope.userinfo = response;
            console.log("FROM Ctrlr: " + response);
        });
    }

});

Service:

MyApp.angular.factory("UserService", function($http,$location){

        var service = {
            createUser: createUser
        };

        return service;

        function createUser(user){
            $http.post("/register", user).then(function(response){

            console.log("FROM Srvc:" +response);
            });
        }
});

NodeJS:

app.post("/register", function(req, res){
    var user = req.body;
res.json(user);
});

I can see the response logged to the console if I call it from the Service. But no response when called from the controller itself. Reason to include MyApp.angular.factory and MyApp.angular.controller is I have declared MyApp in another config file.

What am I doing wrong?

Answer 1

In order to get the response in your controller from the factory change your createUser func in your factory like this:

function createUser(user){
            //notice the return here!!!
            return $http.post("/register", user).then(function(response){

            console.log("FROM Srvc:" +response);
            return response.data; //notice the return here too!!!
            });
        }

You need to return the promise inside the function and inside the then return the result as well in order to get access to it from wherever you call the function.

Answer 2

Unlike node.js which uses callback-based APIs, the AngularJS framework uses promise-based APIs. Return the promise and use its .then method:

Controller

app.controller("loginCtrl", function($scope, UserService){
    $scope.name = "TestName";

    $scope.check = function(user){

        //UserService.createUser(user, function(response){
        //USE .then method
        return UserService.createUser(user).then(function(data) {
            $scope.userinfo = data;
            console.log("FROM Ctrlr: " + data);
            return data;
        }).catch(function(errorResponse) {
            console.log(errorResponse.status);
            throw errorResponse;
        });
    }

});

Service

    function createUser(user){
        var promise = $http.post("/register", user).then(function(response){
            var data = response.data;
            console.log("FROM Srvc:" +data);
            //RETURN data to chain
            return data;
        });
        //RETURN promise
        return promise;
    }

Don't convert promise-based APIs to callback-type APIs. It's considered an anti-pattern.

See Why are Callbacks from Promise .then Methods an Anti-Pattern.

Answer 3

You need to add 1 more parameter, callback and return the response to the callback function

 function createUser(user, callback){
        $http.post("/register", user).then(function(response){

        console.log("FROM Srvc:" +response);

         callback(response);  // return the response in the callback function
        });
 }