使用AngularJS来使用REST

问题描述：

我已经使用Flask提供了一个REST API，它给出了在http://localhost:5000/api/person上的JSON响应，给出了SQLite数据库中所有人员的ID，姓名和电话号码。 http://localhost:5000/api/person/Name_of_person给出了对应于人名的JSON响应。我想使用AngularJS来使用API，这样我就可以输出所有人的姓名以及他们的电话号码。使用AngularJS来使用REST

的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]（https://docs.angularjs.org/api/ng/directive/ngRepeat），在这种情况下，ng-repeat应该为你做好这个诀窍。 – Jax

@Jax我在运行应用程序时遇到问题。如果我在localhost：5000上运行我的REST api，我可以从浏览器打开index.html页面来查看正确的输出吗？ –

是'output.js'在您的角度应用程序中定义的控制器？另外请注意，您正在将api中的数据分配给'$ scope.greeting'，但在您看来，您调用了{{{Person.id}}'，其中未定义Person。 – Jax

答

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

使用AngularJS来使用REST

相关推荐