无法使用角度JS中的Http Get请求获取数据

时间:2018-05-05 12:54:09

标签: angularjs bootstrap-4

我正在尝试使用Http Get请求获取AngularJS中的数据。我创建了一个单独的controller.js文件,我已经实现了Http get service。

我在app中创建了一个database.json文件。当我试图在http-server上运行我的应用程序时,我无法从创建的数据文件中获取数据。

我在控制台中收到以下错误。

enter image description here

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"
    }

    ]
}

有人可以帮我解决这个问题..?

0 个答案:

没有答案