Как я могу сделать HTTP-запрос с помощью Angular.js?

Я пытаюсь сделать HTTP-запрос к API Last.fm с помощью Angular.js, но не могу заставить его работать. Я выделил свои файлы Angular js и скомпилировал их в один файл js с именем scripts.js с помощью Codekit. Порядок, в котором файлы компилируются:

  • angular.min.js
  • app.js
  • controllers.js
  • services.js

Вот как выглядят мои файлы:

app.js

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

controllers.js

app.controller('similarArtistsController', function($scope, similarArtistsService) {

    $scope.artists = [];

    similarArtistsService.getArtists().success(function(response) {

        console.log(response);
    });

});

services.js

app.factory('similarArtistsService', function($http) {

    var similarArtists = {};

    similarArtists.getArtists = function() {

        return $http({
            method: 'GET', 
            url: 'http://ws.audioscrobbler.com/2.0/?method=artist.getSimilar&api_key=MYLASTFMAPIKEY&format=json&limit=5&artist=Tame+Impala'
        });
    }

    return similarArtists;
});

index.html

<body>

    <div ng-app="app">

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

    </div>

    <script src="/js/compiled/scripts.js"></script>

</body>

В моей консоли я вижу «Ошибка: [$ injector: unpr]», что, как я понял, означает, что контроллер не может разрешить зависимость. В моем случае я считаю, что это как-то связано с моей службой, которую я ввожу, но я не знаю, в чем ошибка.


http request angularjs angular-services
person Michael Lynch    schedule 13.02.2014    source источник

Ответы (4)


arrow_upward
2
arrow_downward

Компиляция скриптов тоже их минимизирует? Если это так, вам нужно объявить свои зависимости в массиве ...

app.controller('similarArtistsController', ['$scope', 'similarArtistsService', function($scope, similarArtistsService) {
    $scope.artists = [];
    similarArtistsService.getArtists().success(function(response) {
        console.log(response);
    });
}]);

app.factory('similarArtistsService', ['$http', function($http) {
    var similarArtists = {};
    similarArtists.getArtists = function() {
        return $http({
            method: 'GET', 
            url: 'http://ws.audioscrobbler.com/2.0/?method=artist.getSimilar&api_key=MYLASTFMAPIKEY&format=json&limit=5'
        });
    }
    return similarArtists;
}]);

Без этого Angular использует имена параметров для разрешения зависимостей. Многие минификаторы искажают эти имена.

person Anthony Chu    schedule 13.02.2014
comment
Codekit также минимизирует скрипты. Я добавил зависимости как для контроллера, так и для службы ($ http), но он по-прежнему не работает. Теперь я получаю сообщение об ошибке: [ng: areq]. - person Michael Lynch; 13.02.2014
comment
Кажется, что я вызываю службу (и получаю ошибку неверного ключа api), когда я пытаюсь ее выполнить. Скрипка ... jsfiddle.net/K6GKA - person Anthony Chu; 13.02.2014
comment
Не видел ваш обновленный вопрос. Функция должна быть в массиве. - person Anthony Chu; 13.02.2014
comment
Это действительно работает. Когда я впервые добавил зависимости, я закрыл массив слишком рано. Переместил закрывающую скобку в конец контроллера и сервис заработал. - person Michael Lynch; 13.02.2014

arrow_upward
0
arrow_downward

Включите свои службы перед контроллерами, чтобы служба была известна во время внедрения.

person jlzavitz    schedule 13.02.2014
comment
работал у меня, когда у меня была эта ошибка некоторое время назад. Зависит от того, как вы структурируете свое приложение. Мои новейшие приложения перечисляют все контроллеры, службы и фильтры в одном объекте, а затем они связываются отдельно. Использование $ provide, $ compileProvider, $ controllerProvider, $ filterProvider может позволить вам это сделать. пример Object.each (hash ['services'], function (k, v) {$ provide.factory (k, v);}); - person jlzavitz; 13.02.2014

arrow_upward
0
arrow_downward

Можете ли вы попробовать переключиться на app.service('similarArtistsService', function($http) {});, поскольку это вернет экземпляр функции, а не factory, который вернет значение.

person user3307560    schedule 13.02.2014

arrow_upward
0
arrow_downward

Когда вы объявляете свои зависимости в AngularJS, не закрывайте массив до завершения функции. Смотрите квадратные скобки массива:

controllers.js

app.controller('similarArtistsController', ['$scope', 'similarArtistsService', function($scope, similarArtistsService) {
  // code in here
}]);

services.js

app.factory('similarArtistsService', ['$http', function($http) {
  // code in here
}]);
person Paul Sham    schedule 13.02.2014