Угловое приложение http call custom service failing

Question

Я делаю небольшое угловое приложение, чтобы показать информацию о английской премьер-лиге. Я хочу сделать услугу для обработки http-звонков, потому что я делаю это несколько раз на странице, и я не хочу повторять все. Вот мой table.js TableController, который используется для создания таблицы лиги/

(function(){ 

angular 
.module("eplApp") 
.controller("tableCtrl", TableController); 

TableController.inject = ['httpService']; 

function TableController(service){ 
    var apiUrl = "http://api.football-data.org/v1/soccerseasons/426/leagueTable"; 

    service.getListFromUrl(apiUrl).then(function(data){ 
var vm.this; 
vm.data = response.data; 
}); 
} 
})(); 

А вот сервис я сделал для запуска запросов HTTP, service.js:

(function(){ 

angular 
.module("eplApp") 
.factory("httpService", httpService); 

httpService.inject = ['$http']; 

function httpService($http){ 
var apiKey = '971acba677654cdb919a7ccebd5621e2'; 
var vm = this; 
vm.data = []; 

$http({ 
    headers: { 'X-Auth-Token': apiKey }, 
    method: "GET", 
    url: apiUrl 
}).then(function(response) { 
    vm.data = response.data; 
    return vm.data; 
}); 
} 
})(); 

Когда я запускаю его, я получаю следующую ошибку:

Error: [$injector:unpr] http://errors.angularjs.org/1.5.8/$injector/unpr?p0=serviceProvider%20%3C-%20service%20%3C-%20tableCtrl 

Где я иду не так?

Answer 1

Try с изменением вашего сервис так:

(function(){ 

    angular 
    .module("eplApp") 
    .factory("httpService", httpService); 

    httpService.$inject = ['$http']; 

    function httpService($http){ 
    return { 
     getListFromURL : getListFromURL 
    } 

    function getListFromURL(apiUrl){ 
     var apiKey = '971acba677654cdb919a7ccebd5621e2'; 
     var vm = this; 
     vm.data = []; 

     return $http({ 
     headers: { 'X-Auth-Token': apiKey }, 
     method: "GET", 
     url: apiUrl 
     }).then(function(response) { 
     vm.data = response.data; 
     return vm.data; 
     }); 
    } 
})(); 

И вызовите функцию в контроллере, как это:

TableController.$inject = ['httpService']; 

function TableController(service){ 
    var apiUrl = "http://api.footballdata.org/v1/soccerseasons/426/leagueTable"; 

    service.getListFromURL(apiUrl).then(function(data){ 
    //data here is vm.data 
    }); 
} 

Надеется, что это поможет!

Answer 2

Проверьте контроллер, который вы использовали, функция-контроллер - это httpService, и вы использовали внутри HttpService. Пожалуйста, объясните, что он чувствителен к делу.