我正在尝试使用Http Get请求获取AngularJS中的数据。我创建了一个单独的controller.js文件,我已经实现了Http get service。
我在app中创建了一个database.json文件。当我试图在http-server上运行我的应用程序时,我无法从创建的数据文件中获取数据。
index.html
:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>AngularJS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<!--Route Guard -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!-- Controller.js -->
<script src="controller.js"></script>
<body ng-app="myApp">
<div ng-controller="datactrl">
<ul>
<h4>Name And Age Of The persons</h4>
<li ng-repeat="person in persons">
{{ person.Name+ ':' + person.Age }}
</li>
</ul>
</div>
</body>
</html>
controller.js
:
var app = angular.module("myApp", [ ]);
app.controller('datactrl', function($scope, $http) {
$http.get('http://127.0.0.1/AngularJS/HttpGet/database.json')
.then(function(response) {
$scope.persons = response.records;
});
});
database.json
:
{
"records": [
{
"Name" : "asd",
"Age" : "20"
},
{
"Name" : "asd",
"Age" : "20"
},
{
"Name" : "asd",
"Age" : "20"
}
]
}
有人可以帮我解决这个问题..?