使用AngularJS使用REST服务_Angularjs

使用AngularJS使用REST服务

angularjs

使用AngularJS使用REST服务,angularjs,Angularjs,我有一个用Java编写的REST服务，它返回JSON格式的数据数组，如下所示： [{"key":"London","value":"51.30"}] 现在我正在尝试使用AJS文档编写AngularJS REST客户端。到目前为止，我已经能够调用REST服务（我可以从服务器日志中看到），但HTML页面中没有打印任何内容。这是我的密码： <!doctype html> <html > <head> <script src="https:/

我有一个用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>


模块（'myApp'，['ngResource']）；
函数Ctrl（$scope$resource）{
var Geonames=$resource(
'http://localhost:8080/rest-application/rest/json'，{
}, {
查询：{method'GET'，isArray:true}，
创建：{method:'POST'}
}
);
$scope.objs=Geonames.query（）；
};
Ctrl.$inject=['$scope'，'$resource']；
{{objs.key}}-{{objs.value}

我已经尝试了这个例子，从教程中选取了几个小的变体，但它仍然不起作用。有什么帮助吗

谢谢

从

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>



{{obj.key}}-{{obj.value}

首先，让我们稍微组织一下您的代码：

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>


{{object.key}}-{{object.value}

只有我的两分钱，但是，这样您就重复了

结构，因此您将有几个，每个。也许把ng repeat
放在
上会更好？你怎么认为？（这里只讲语义）@GonchuB你是100%正确的，我已经修改了我的代码谢谢你的回复-我已经检查了结果，但它仍然显示任何内容，即使调用了REST服务。query（）方法显示空字符串后出现$scope.objs警报。您能检查服务器是否返回数据吗？你可以在ChromeDevTools的网络标签中查看。谢谢你的提示。从Chrome控制台中，我可以看到一条错误消息：“XMLHttpRequest无法加载。请求的资源上不存在“访问控制允许源代码”标题。因此，不允许访问源代码‘null’。”感谢您的贡献。我已经用修改测试了代码；不幸的是，它不起作用，从日志中我可以看到REST服务不再被调用了。糟糕的是，您确实需要ngResource
模块。这样行吗？