Cannot retrieve JSON, using ngResource

I'm trying to retrieve some JSON from a URL, but I am getting nowhere. This is for a small football application I'm trying to build (probably for personal use), mainly to get better at using Angular 1, (before using Angular 2).

http://api.football-data.org/code_samples

As you can see, there is not Angular JS example that I can use and I am closely trying to copy the javascript example.

http://api.football-data.org/v1/competitions/424

This is the data that I am trying to display, via the ngResource way. I followed a Udemy Tutorial and if possible, I would like someone to do an example, using this way, please. P.S. API KEY IS FREE (http://api.football-data.org/client/register)! JUST E-MAIL AND YOU WILL GET ONE BACK INSTANTLY!

If someone could help me with this. I would very much appreciate it.

Thanks

HTML

<!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);
}]);

Solution

Take a time to read about $resource , you did some error, like setting header.

USAGE:
$resource(url, [paramDefaults], [actions], options);

paramDefaults: Default values for url parameters.

So with your defined resouces, the token wont go to header but as parameter, and API will return a 404. You should set headers for every method:

And you don't need to use jsonp, get will work

eg:

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

For calling the method:

"class" actions without a body: Resource.action([parameters], [success], [error]) "class" actions with a body: Resource.action([parameters], postData, [success], [error])

So calling get for competition id 424 is:

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