使用 AngularJS 消费 REST答案

【问题标题】：Using AngularJS to consume REST使用 AngularJS 消费 REST
【发布时间】：2016-03-08 09:49:34
【问题描述】：

我使用 Flask 制作了一个 REST api，它在http://localhost:5000/api/person 上给出 JSON 响应，给出 SQLite 数据库中所有人的 ID、姓名和电话号码。 http://localhost:5000/api/person/Name_of_person 给出与人名对应的 JSON 响应。我想使用 AngularJS 来使用 API，以便我可以输出所有人的姓名以及他们的电话号码。

index.html

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="customersCtrl"> 

<ul>

  <li ng-repeat="x in myData">
    {{ x.id }} + ', ' + {{x.name }} + ',' + {{x.phone}}
  </li>

</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $http.get("http://localhost:5000/api/person").then(function (response) {
  $scope.myData = response.data.objects;
  });
});
</script>

</body>
</html>

http://localhost:5000/api/person的内容

{
  "num_results": 5, 
  "objects": [
{
  "id": 24, 
  "name": "Name2", 
  "phone": "9999192938"
}, 
{
  "id": 23, 
  "name": "Name3", 
  "phone": "9999192938"
}, 
{
  "id": null, 
  "name": "Name4", 
  "phone": "9999192938"
}, 
{
  "id": 21, 
  "name": "Name5", 
  "phone": "9999192938"
}, 
{
  "id": null, 
  "name": "Name6", 
  "phone": "9999192938"
}
  ], 
  "page": 1, 
  "total_pages": 1
}

我很确定我的语法是正确的，但我没有得到 index.html 的输出。谁能解释我哪里出错了？可能是因为它在本地服务器上并且无法检索数据？

【问题讨论】：

我会先阅读Angular docs，在这种情况下，ng-repeat 应该可以帮到你。
@Jax 我在运行应用程序时遇到问题。如果我的 REST api 在 localhost:5000 上运行，我可以从浏览器中打开 index.html 页面来查看正确的输出吗？
output.js 是您的 Angular 应用程序中定义的控制器吗？另请注意，您将 api 中的数据分配给 $scope.greeting，但在您看来，您调用 {{Person.id}}，其中未定义 Person。
@Jax 我已经编辑了问题以纠正我之前犯的一些错误，但它仍然无法正常工作。我还是哪里错了吗？
@Jax 出于某种原因我无法解决这个问题 - 我在问题中提供了更多细节。如果您能以任何方式帮助我，我将不胜感激。谢谢。

标签： javascript angularjs json rest flask

【解决方案1】：

如果API返回正确的结果，请通过REST客户端测试API。
如果您在运行应用程序时遇到问题，请使用 firefox 浏览器进行测试。对于 chrome，您需要通过任何服务器提供 index.html，因为它会阻止 file:/// 协议并需要 http:// 才能正常运行。
确保您的 API 支持 CORS。您必须在 API 端设置它（请参阅 Flask 文档），否则您可以使用 chrome 的 CORS 插件。
如果问题仍然存在，则可能存在任何逻辑/语法错误。请粘贴/分享您的浏览器控制台的屏幕截图。

【讨论】：