Angularjs 无法使用ngResource检索JSON_Angularjs_Json_Rest_Ngresource

Angularjs 无法使用ngResource检索JSON

angularjs json rest

Angularjs 无法使用ngResource检索JSON,angularjs,json,rest,ngresource,Angularjs,Json,Rest,Ngresource,我试图从URL中检索一些JSON，但我一无所获。这是我正在尝试构建的一个小型足球应用程序（可能是个人使用），主要是为了更好地使用Angular 1（在使用Angular 2之前）如您所见，我没有可以使用的Angular JS示例，我正在尝试复制javascript示例这是我试图通过ngResource方式显示的数据。我遵循我的教程，如果可能的话，我想有人做一个例子，用这种方式，请。另外，API密钥是免费的（）！只要发一封电子邮件，你就会马上收到一封如果有人能帮我。我将非常感激谢谢 H

我试图从URL中检索一些JSON，但我一无所获。这是我正在尝试构建的一个小型足球应用程序（可能是个人使用），主要是为了更好地使用Angular 1（在使用Angular 2之前）

如您所见，我没有可以使用的Angular JS示例，我正在尝试复制javascript示例

这是我试图通过ngResource方式显示的数据。我遵循我的教程，如果可能的话，我想有人做一个例子，用这种方式，请。另外，API密钥是免费的（）！只要发一封电子邮件，你就会马上收到一封

如果有人能帮我。我将非常感激

谢谢

HTML


安格拉斯足球统计
html、正文、输入、选择、文本区域
{
字体大小：1.05em！重要；
}

//模块
var quickEleven=angular.module（'quickEleven'，['ngRoute'，'ngResource']）；
//控制器
quickEleven.controller（'homeController'、['$scope'、'$resource'、'cityService'，函数（$scope、$resource、cityService）{
$scope.footballAPI=
$resource（“http://api.football-data.org/v1/competitions/424“，{headers:{“X-Auth-Token”：”“}，{get:{method:“JSONP”}”
});
$scope.fussball=$scope.footballAPI.get（{}）；
console.log（$scope.fussball）；
}]);

花点时间阅读一下，您犯了一些错误，比如设置标题

用法：
$resource（url、[ParamDefault]、[actions]、选项）

paramDefaults：url参数的默认值

因此，对于您定义的资源，令牌将不会转到标头，而是作为参数，API将返回404。您应该为每个方法设置标题：

而且您不需要使用jsonp，

get

将起作用

例如：

这里有一个关于将$resource与JSONP一起使用的好例子：它非常有魅力。非常感谢你的帮助。

<!DOCTYPE html>
    <html lang="en-gb" ng-app="quickEleven">
        <head>
            <title>AngularJS Football Stats</title>
            <meta http-equiv="X-UA-Compatible" content="IE=Edge">
            <meta charset="UTF-8">

            <!-- load bootstrap and fontawesome via CDN -->
            <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
            <style>
                html, body, input, select, textarea
                {
                    font-size: 1.05em !important;
                }
            </style>

            <!-- load angular via CDN -->
            <script src="//code.angularjs.org/1.3.0-rc.2/angular.min.js"></script>
            <script src="//code.angularjs.org/1.3.0-rc.2/angular-route.min.js"></script>
            <script src="//code.angularjs.org/1.3.0-rc.2/angular-resource.min.js"></script>
            <script src="app.js"></script>
        </head>
        <body>

            <header>
                <nav class="navbar navbar-default">
                <div class="container">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="/">AngularJS Football</a>
                    </div>

                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
                    </ul>
                </div>
                </nav>
            </header>

            <div class="container">

                <div ng-controller="homeController"></div>

            </div>

        </body>
    </html>

// MODULE
var quickEleven = angular.module('quickEleven', ['ngRoute', 'ngResource']);

// CONTROLLERS
quickEleven.controller('homeController', ['$scope', '$resource', 'cityService', function($scope, $resource, cityService) {
    $scope.footballAPI = 
        $resource("http://api.football-data.org/v1/competitions/424", {headers: {"X-Auth-Token": "<API TOKEN KEY>"}}, { get: { method: "JSONP"}
        });

    $scope.fussball = $scope.footballAPI.get({});

    console.log($scope.fussball);
}]);

$resource("http://api.football-data.org/v1/competitions/:competitionId", {}, {    
  get: {
    method: "GET",
    headers: {
      "X-Auth-Token": "<API TOKEN KEY>"
    }
  }
});

  $scope.footballAPI.get({
    competitionId: 424
  }, function(data) {
    $scope.fussball = data;       
  }, function(err) {
    console.log('error:', err);
  });