0

更新: console.log $scope.Host = data; 行の直前に行ったときに発生するエラーは次のとおりです。

XMLHttpRequest cannot load http://..... No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:52029' is therefore not allowed access.

JSON データを返す API を呼び出そうとしています。私は AngularJS の初心者であり、API を呼び出してデータを非常に簡単に表示しようとしています。

私のHTMLファイル：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>My AngularJS App</title>
    <script src="../scripts/angular.js"></script>
</head>
<body>
    <div data-ng-app="MyModule">

        <table class="table" data-ng-controller="MyModuleCtrl">
            <tr>
                <th>
                    FirstName
                </th>
                <th>
                    MiddleName
                </th>
                <th>
                    LastName
                </th>
                <th>
                    Email
                </th>
                <th>
                    Active
                </th>
            </tr>

            <tr>
                <td>
                    {{Host.FirstName}}
                </td>
                <td>
                    {{Host.MiddleName}}
                </td>
                <td>
                    {{Host.LastName}}
                </td>
                <td>
                    {{Host.Email}}
                </td>
                <td>
                    {{Host.Active}}
                </td>
            </tr>
        </table>
    </div>
    <script src="../scripts/MyApp/App.js"></script>
</body>
</html>

App.js ファイル:

var MyModule = angular.module("MyModule", []);

MyModule.factory('MyHttpService',
    ['$http', function ($http) {

    return {
        getAll: function () {
            return $http.get('http://api.host.com/host'); //it returns json data
        }
 };
}]);

MyModule.controller('MyModuleCtrl', ['$scope', '$http', '$window', 'MyHttpService', 
    function ($scope, $http, $window, MyHttpService) {

        load();

        function load() {
            MyHttpService.getAll().success(function (data) {
               $scope.Host = data;
            }
        );
    }
}]);
4

1 に答える 1