使用AngularJS來使用REST

-1

我已經使用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。任何人都可以請解釋我要去哪裏錯了嗎？這可能是因爲它在本地服務器上，無法檢索數據？

來源

2016-03-08 Mahatma Gandhi

我首先閱讀[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。
如果問題仍然存在，可能會出現任何邏輯/語法錯誤。請粘貼/分享您的瀏覽器控制檯的屏幕截圖。

來源

2016-03-08 13:23:53

使用AngularJS來使用REST

回答

相關問題