可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

To resolve my issue I have gone through many articles on different sites, but none resolved it. I'm writing a simple AngularJS application. I'm quite new to Angular. I have written a factory method which call the $http service which gets the data from the web api. Web api is running fine and its returning the JSON object as expected.

Angular Code

 var app = angular.module("app", [])
            .controller("controller", function ($scope, WebFactory) {
                $scope.data = "data";
                $scope.error = "error";
                $scope.data=WebFactory.getData();

            })
            .factory("WebFactory", function ($http) {
                var obj = {};

                obj.getData = function()
                {
                    $http({
                        method: "GET",
                        url: "http://localhost:37103/api/employee",                      
                    }).then(function success(response) {
                        return response.data;
                    })
                    .then(function error(response) {
                        return response;
                    });
                    return 'No data';
                }
                return obj;

            });

HTML code

 <body ng-controller="controller">

data: {{data}}
<br/>
error: {{error}}
<br />

I have spent 2 days, but still dont know why its not working.

回答1:

Try something like this instead:

var app = angular.module("app", [])
            .controller("controller", function ($scope, WebFactory) {
                $scope.data = "data";
                $scope.error = "error";
                $scope.data = {}
                WebFactory.getData().then(function success(response) {
                        $scope.data = response.data;
                    });
            })
            .factory("WebFactory", function ($http) {
                var obj = {};

                obj.getData = function()
                {
                    return $http({
                        method: "GET",
                        url: "http://localhost:37103/api/employee",                      
                    })
                }
                return obj;
            });

回答2:

First of all, you're missing an ng-app declaration

Secondly, you are misusing the then callback. It accepts three parameters: success callback, error callback, finally callback. As the first then executes the success, then it executes the second callback that always returns the response, but I assume it is not intended to be that way and you could use the get function which is more easy to use. It should be:

$http.get("http://localhost:37103/api/employee").then(function(response){
     //Do something with successfull response
 },
  function(error){ //do something with the error});

See documentation about promises

Lastly, you are dealing with promises and async code, yet returning response or string instead of the promise with the result. So the getData() should look like this:

obj.getData = function(){
   return    $http.get("http://localhost:37103/api/employee");
}

And use the then(success,error,finally) callbacks in the controller or if you want to provide values on the error/finally callbacks in the service, you should use the $q service

obj.getData(){
 var deferred = $q.defer();
 $http.get(...).then(function(response){
      deferred.resolve(response.data);
   },
   function(error){
       deferred.reject("No Data");
   });
  return deferred.promise;
}

Of course you would have to provide $q service to the WebFactory