преобразование запроса ajax в угловой $http

Я изучаю, как использовать angular, и я не очень хорошо разбираюсь в том, как делать запросы к API. Я пытаюсь потренироваться, используя http://api.football-data.org/index. Данные json, которые я хотел получить от своей фабрики angular, это http://api.football-data.org/v1/competitions/426/leagueTable. Прямо сейчас я получаю сообщение об ошибке в консоли

'angular.js: 13920 TypeError: невозможно прочитать свойство getLeagueData неопределенного значения при новом...'

Мой CLI показывает, что я загружаю все свои файлы сценариев, и я протестировал свой контроллер, прежде чем пытаться ввести фабрику и создать функцию getLeagueData, и она работала, поэтому я знаю, что моя проблема возникла после создания базового контроллера. Я думал, что это может быть связано с тем, что моим заголовкам требуется токен аутентификации, который я получил, но я не уверен, что я не добавил его правильно. Вот мой код

HTML

<!DOCTYPE html>
<html lang="en" ng-app='bplApp'>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title><%= title %></title>

<!-- Bootstrap -->
<link href="/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!--Font Awesome-->
<link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.min.css">
<!--Custom-->
<link rel='stylesheet' type='text/css' href='/stylesheets/main.css'>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class='leagueCheck' ng-controller='tableController as table'>
  <div class='container'>
    <div class='row'>
      <div class='col-xs-12'>
        {{table.test}}
      </div>
    </div>
  </div>
</div>



<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src='/bower_components/angular/angular.min.js'></script>
<!--Module-->
<script src='bplApp.js'></script>
<!--Controller-->
<script src='/controllers/tableController.js'></script>
<!--Service-->
<script src='/services/footballData.js'></script>

Модуль

var app = angular.module('bplApp',[]);

Контроллер

app.controller('tableController', ['$scope', 'footballData', function($scope, footballData){
var self = this;

self.test = 'is working';
self.leagueStats = [];

footballData.getLeagueData().then(function(data){
    self.leagueStats = data;
    console.log(self.leagueStats);
  })
}])

Фабрика

app.factory('footballData', [function($http){
      return {
        getLeagueData: function(){
            return $http({
              method: 'GET',
              url: 'http://api.football-data.org/v1/competitions/426/leagueTable',
              headers:{
                  'X-Auth-Token': '3e629af30fce46edaa6ead20e007a276'
              }
            })
        }  
      }
}])

Исходный пример кода ajax, который API показывает для его использования, выглядит следующим образом.

$.ajax({
  headers: { 'X-Auth-Token': 'YOUR_API_TOKEN' },
  url: 'http://api.football-data.org/v1/fixtures?timeFrame=n1',
  dataType: 'json',
  type: 'GET',
}).done(function(response) {
  // do something with the response, e.g. isolate the id of a linked     resource        
  var regex = /.*?(\d+)$/; // the ? makes the first part non-greedy
  var res = regex.exec(response.fixtures[0]._links.awayTeam.href);
  var teamId = res[1];
  console.log(teamId);
});

angularjs angular-http
person Rawle Juglal    schedule 06.09.2016    source источник
comment
Вы неправильно внедрили свою фабрику footballData. Изменить ['$scope', function($scope, footballData) на ['$scope', 'footballData', function($scope, footballData)   -  person Phil    schedule 06.09.2016
comment
Кроме того, не используйте устаревший обратный вызов success. См. https://docs.angularjs.org/api/ng/service/$http#deprecation-notice   -  person Phil    schedule 06.09.2016
comment
Голосование за закрытие как опечатка. +1 за написание хорошего вопроса со всей необходимой информацией.   -  person Phil    schedule 06.09.2016
comment
Эй, спасибо за ответ. Я внес ваши изменения и увидел, как они оба были неправильными. Но это не изменило ответ, который я получаю от консоли о том, что Object.getLeagueData не является функцией   -  person Rawle Juglal    schedule 06.09.2016
comment
На самом деле я предполагаю, что ошибка - это другая ошибка angular.js: 13920TypeError: $ http не является функцией в Object.getLeagueData   -  person Rawle Juglal    schedule 06.09.2016
comment
Ваша аннотация массива неверна, измените ее на app.factory('footballData', [ "$http", function($http){...]);   -  person Developer    schedule 06.09.2016

Ответы (1)


arrow_upward
2
arrow_downward

Вы использовали запись массива на своей фабрике. Либо используйте его напрямую, либо объявите $http в массиве:

app.factory('footballData', ["$http", function($http){
      return {
        getLeagueData: function(){
            return $http({
              method: 'GET',
              url: 'http://api.football-data.org/v1/competitions/426/leagueTable',
              headers:{
                  'X-Auth-Token': '3e629af30fce46edaa6ead20e007a276'
              }
            })
        }  
      }
}])

OR

app.factory('footballData', function($http){
      return {
        getLeagueData: function(){
            return $http({
              method: 'GET',
              url: 'http://api.football-data.org/v1/competitions/426/leagueTable',
              headers:{
                  'X-Auth-Token': '3e629af30fce46edaa6ead20e007a276'
              }
            })
        }  
      }
})

Какой подход выбрать, решать вам, есть некоторые документы, которые помогут вам принять решение.

person Sombriks    schedule 06.09.2016
comment
Спасибо. Я постоянно забываю об этом в записи массива. Я собираюсь начать писать это по-другому. - person Rawle Juglal; 06.09.2016