Question

我有一个名为“Server”的工厂，它包含我与服务器交互的方法（get / put / post / delete ..）。当我在控制器中拥有所有代码时，我设法登录并成功获取所有数据。既然我想要分离这些代码并重新构建它，我遇到了问题。我仍然可以登录，我也可以获取数据 - 但数据只是打印出来;我不确定如何访问控制器中的数据？我在网上看到了一些“.then”而不是“.success”，但我不知道究竟是怎么回事。

这是我的工厂:(包含在services.js中）

app.factory('Server', ['$http', function($http) {
    return {
        // this works as it should, login works correctly
       login: function(email,pass) {
            return $http.get('mywebapiurl/server.php?email='+email+'&password='+pass').success(function(data) {
                console.log("\nLOGIN RESPONSE: "+JSON.stringify(data));
                if(data.Status !== "OK")
                   // login fail
                   console.log("Login FAIL...");
                else
                   // success   
                   console.log("Login OK...");
                });
        },

        // intentional blank data parameter below (server configured this way for testing purposes)
        getAllData: function() {
            return $http.get('mywebapiurl/server.php?data=').success(function(data) {
                console.log("\nDATA FROM SERVER: \n"+data); // here correct data in JSON string format are printed
            });
        },
    };

}]);

这是我的控制者：

app.controller("MainController", ['$scope', 'Server', function($scope, Server){ 

   Server.login();   // this logins correctly   

   $scope.data = Server.getAllData(); // here I want to get data returned by the server, now I get http object with all the methods etc etc.

  …. continues …

如何在工厂内获取使用$ http检索的数据，以便在控制器中访问？我只有一个控制器。

感谢您的帮助，我相信必须有一个简单的方法来做到这一点。或者我可能采取错误的方式解决这个问题？

编辑：我还需要能够使用ng-click从视图中调用工厂函数。现在我可以这样做：

// this is a method in controller
$scope.updateContacts = function(){
    $http.get('mywebapiURL/server.php?mycontacts=').success(function(data) {
        $scope.contacts = data;
    }); 
};

并使用ng-click =“updateContacts（）”在视图中进行调用。了解$ scope.contacts如何在上述函数中获取新数据。我怎么用.then方法做这个？（将返回的数据分配给变量）

直截了当地问我的问题：

让我们说我需要将部分控制器代码与它分开（因此它不会弄得一团糟），就像所有$ scope中可用的一些函数一样。在AngularJS中实现此目的的最佳方法是什么？也许这不是我想的服务......

Answer 1

诀窍是在服务中使用promise来代理结果。

$ http服务返回一个承诺，您可以使用列表或成功和错误分别处理这些条件。

此代码块显示处理调用结果：

var deferred = $q.defer();
$http.get(productsEndpoint).success(function(result) {
    deferred.resolve(result);
}).error(function(result) { deferred.reject(result); });
return deferred.promise;

代码使用Angular $ q服务来创建一个promise。解析$ http调用后，将使用promise将信息返回给控制器。控制器像这样处理它：

app.controller("myController", ["$scope", "myService", function($scope, myService) {
    $scope.data = { status: "Not Loaded." };
    myService.getData().then(function(data) { $scope.data = data; });
}]);

（如果你想明确处理拒绝，可以传递另一个函数。）

关闭循环：使用promise返回数据的服务，以及调用服务并链接结果承诺的控制器。我在网上有一个完整的小提琴：http://jsfiddle.net/HhFwL/

您可以更改结束点，现在它只是指向通用OData终点来获取某些产品数据。

更多关于$ http：http://docs.angularjs.org/api/ng.%24http 有关$ q的更多信息：http://docs.angularjs.org/api/ng.%24q

Answer 2

$ http.get返回一个Http Promise对象

 Server.getAllData().then(function(results){

   $scope.data = results;
 })

AngularJS：使用工厂内的$ http接收数据，以便在控制器内部访问

2 个答案: