控制器未使用Angular $ http服务

时间:2017-03-08 23:11:15

标签: javascript angularjs node.js angularjs-http

我创建了一个表单并单击该表单,我希望看到来自服务器的响应(nosejs)。在Angular 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);
        });
    }

});

服务:

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

如果我从服务中调用响应,我可以看到响应记录到控制台。但是从控制器本身调用时没有响应。包含MyApp.angular.factoryMyApp.angular.controller的原因是我在另一个配置文件中声明了MyApp。

我做错了什么?

3 个答案:

答案 0 :(得分:1)

为了从工厂获得控制器中的响应,请更改工厂中的createUser func,如下所示:

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

您需要在函数内部返回promise,并在then内部返回结果,以便从您调用函数的任何地方访问它。

答案 1 :(得分:0)

与使用基于回调的API的node.js不同,AngularJS框架使用基于承诺的API。 退回承诺并使用其.then方法:

控制器

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

});

服务

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

不要将基于承诺的API转换为回调类型的API。它被认为是一种反模式。

请参阅Why are Callbacks from Promise .then Methods an Anti-Pattern.

答案 2 :(得分:-1)

您需要再添加1个参数,回调并将响应返回给回调函数

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