在 AngularJS 中使用 Wcf 数据服务答案

【问题标题】：Consuming Wcf Data service in AngularJS在 AngularJS 中使用 Wcf 数据服务
【发布时间】：2015-10-07 01:23:07
【问题描述】：

我是 AngularJS 的新手。我正在尝试使用 AngularJS 使用 Wcf 数据服务。我一直在失败，因为我不确定哪里出了问题。有人可以帮我解决这个问题。谢谢。

如果这样查询，数据服务将返回 Json：

http://localhost/Wcf/DataService/Report/ReportService.svc/SystemCategories?$format=json

返回的样本 Json：

{"odata.metadata":"http://localhost/Wcf/DataService/Report/ReportService.svc/$metadata#SystemCategories","value":[
    {"ID":1,"SystemName":"System-A","Description":"System A"},
    {"ID":2,"SystemName":"System-B","Description":"System B"},
    {"ID":3,"SystemName":"System-C","Description":"System C"}]}

代码（来自 w3school 的示例）

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="systemCat"> 
<ul>
  <li ng-repeat="x in categories">
    {{ x.ID + ', ' + x.SystemName }}
  </li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('systemCat', function($scope, $http) {
  $http.get("http://localhost/Wcf/DataService/Report/ReportService.svc/SystemCategories?$format=json")
  .success(function (response) {$scope.categories = response.value;});
});
</script>
</body>
</html>

【问题讨论】：

标签： javascript c# json angularjs rest

【解决方案1】：

这段代码应该可以工作，如果不看一下javascript控制台，你发现那里的任何错误都会让你知道出了什么问题。

<script>
  var app = angular.module('myApp', []);
  app.controller('systemCat', function($scope, $http) {
    $http.get('http://localhost/Wcf/DataService/Report/ReportService.svc/SystemCategories?$format=json')
      .success(function (data) {
        console.log(data);
        $scope.categories = data.value;
      })
      .error(function (data) {
        console.log('error!');
      });
  });
</script>

【讨论】：

Daniels 代码肯定会有所帮助，但是如果您可以将 $http 调用提取到服务中，它将使您的 Angular 应用程序更易于管理。看看这个 plunker 以获得一些帮助 plnkr.co/edit/noJMqQ?p=preview