AngularJs 服务中从 Web Api 接收数据的问题

Question

我将在我的应用程序中使用 AngularJS 服务，让一切都变得干净漂亮。为此我阅读了一些文章。但似乎还没有完成。对吧??
我没有看到任何错误或其他东西，但是当我设置警报（数据）时；我会得到未定义的错误。我在这里错过的工作是什么？

我的App.js

var app = angular.module('starter', ['ionic'])

我的Service.js

var serverPath = 'http://url/api/locations';

app.service('testService', function($http) {
  this.getLocations = function() {
    $http.get(serverPath).success(function(data) {
      return data;
    });
  };
});

我的controller.js

app.controller('LocationsController', function ($scope, testService) {
  $scope.locations = testService.getLocations();
});

和我的UI

<div ng-controller="LocationsController">
  <ul>
    <li ng-repeat="location in locations">
      {{ location.locationName }}
    </li>
  </ul>
</div>

Answer 1

不能一请求数据就直接异步调用获取数据。你应该遵循promise模式来处理异步数据。

我想指出你犯的几个错误。

您应该从服务方法 getLocations 获得 return $http.get 承诺，这样您就可以在该方法上放置 .then 函数。
然后在控制器内部从控制器调用服务方法getLocations并放置.then函数，其中第一个将在ajax成功时调用，第二个将调用调用 ajax 错误。 .then
的函数
```
this.getLocations = function () {
    return $http.get(serverPath); //return promise object
};
```

控制器

testService.getLocations().then(function(response){ //success function
     $scope.locations = response.data;
}, function(error){ //error function
     console.log("Some error occurred", error)
});

Answer 2

这是我的做法，因为 $http 里面有 promise

我想给页面添加一个初始化步骤。

内部服务：

$http.get(serverPath)
  .success(function(data) {
    return data;
  })
  .error(function(err) {
    console.log("some error occured");
    return err;
  });

控制器：

app.controller('LocationsController', function($scope, testService) {
  $scope.init = function() {
    testService.getLocations()
      .success(function(res) {
        $scope.locations = res;
      })
      .error(function(err) {
        console.log("LocationsController, getLocations error:", err);
        // alert(err);
      });
  };
});

标记：

<div ng-controller="LocationsController" ng-init="init()">
  <ul>
    <li ng-repeat="location in locations">
      {{ location.locationName }}
    </li>
  </ul>
</div>

如果您的 http 调用需要一些时间，您也可以添加 ng-hide。

AngularJs 服务中从 Web Api 接收数据的问题

issue with reciving data from WebApi in AngularJs Service

javascript

asp.net-web-api

angularjs

angularjs-service

angular-promise