使用 AngularJS 使用 REST 服务答案

【问题标题】：Consuming REST service using AngularJS使用 AngularJS 使用 REST 服务
【发布时间】：2014-04-09 21:59:55
【问题描述】：

我有一个用 Java 编写的 REST 服务，它以 JSON 格式返回一组数据，如下所示：

[{"key":"London","value":"51.30"}]

现在我正在尝试使用 AJS 文档编写 AngularJS REST 客户端。到目前为止，我已经能够调用 REST 服务（我可以从服务器日志中看到），但 HTML 页面中没有打印任何内容。这是我的代码：

<!doctype html>
<html  >
  <head>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-resource.js"></script>
         <script language="javascript">


      angular.module('myApp',['ngResource']);
            function Ctrl($scope,$resource) {
              var Geonames = $resource(
              'http://localhost:8080/rest-application/rest/json', {     
               }, {
               query: { method: 'GET', isArray: true },
               create: { method: 'POST' }
            }
          );
          $scope.objs = Geonames.query();
         };
         Ctrl.$inject = ['$scope','$resource'];

  </script>
 </head>

    <body >
       <div ng-app="myApp">
              <div ng-controller="Ctrl">
                 {{objs.key}} - {{objs.value}}

              </div>
           </div>
    </body>
</html>

我已经尝试使用从教程中获取的几个小变体来尝试这个示例，但它仍然无法正常工作。有什么帮助吗？
谢谢！

【问题讨论】：

标签： angularjs

【解决方案1】：

你从query() 得到的是一个数组，所以你应该用ng-repeat 循环遍历它

 <div ng-app="myApp">
    <div ng-controller="Ctrl">
       <ul>
           <li ng-repeat="obj in objs">{{obj.key}} - {{obj.value}}</li>
       </ul>
    </div>
 </div>

【讨论】：

只是我的两分钱，但是，这样你就重复了<ul> 结构，所以你将有几个<ul>，每个只有一个<li>。也许将ng-repeat 放在<li> 上会更好？你怎么看？（这里只讲语义）
@GonchuB 你是 100% 正确的，我已经修改了我的代码
感谢您的回复 - 我已经检查了结果，但它仍然显示任何内容，即使正在调用 REST 服务。 query() 方法后的 $scope.objs 警报显示一个空字符串。
能否检查服务器是否返回数据？您可以在 Chrome 开发工具的网络选项卡中检查。
感谢您的提示。好吧，从 Chrome 控制台我可以看到一条错误消息：“XMLHttpRequest 无法加载 localhost:8080/rest-application/rest/json。请求的资源上不存在 'Access-Control-Allow-Origin' 标头。因此不允许访问 Origin 'null'。”

【解决方案2】：

首先，让我们稍微整理一下你的代码：

var app = angular.module('myApp',['ngResource']);
// Controllers get their dependencies injected, as long as you don't minify your code and lose variable names.
app.controller('Ctrl', function($scope, $resource) {
    $scope.objs = []; // We initialize the variable for the view not to break.
    // For the query example, you don't need to define the method explicitly, it is already defined for you.
    var Geonames = $resource('http://localhost:8080/rest-application/rest/json');
    // Resource methods use promises, read more about them here: http://docs.angularjs.org/api/ng/service/$q
    Geonames.query({}, function(arrayResult) {
        $scope.objs = arrayResult;
    });
});

您必须使用 ng-repeat 指令调整您的 html 代码来处理数组中的每个项目：

<body>
    <div ng-app="myApp">
        <div ng-controller="Ctrl">
            <!-- object is a reference for each item in the $scope.objs array-->
            <span ng-repeat="object in objs">
                {{object.key}} - {{object.value}}
            </span>
        </div>
    </div>
</body>

【讨论】：

感谢您的贡献。我已经通过更改测试了代码；不幸的是，它不起作用，从日志中我可以看到不再调用 REST 服务。
我的错，你确实需要ngResource 模块。是这样的吗？