How can I make an HTTP request using Angular.js?

StackOverflow https://stackoverflow.com/questions/21763116

Pregunta

I'm trying to make an HTTP request to the Last.fm API using Angular.js but I can't get it to work. I have separated out my Angular js files and have compiled them into one single js file called scripts.js using Codekit. The order in which the files are compiled is:

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

Here is what my files look like:

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>

In my console I see "Error: [$injector:unpr]" which I've learned to mean that the controller cannot resolve a dependency. In my case I believe it has something to with my service I'm injecting, but I don't know where the error lies.

¿Fue útil?

Solución

Does compiling the scripts minify them too? If so, you need to declare your dependencies in an array...

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

Without that, Angular uses parameter names to resolve dependencies. Many minifiers mangle those names.

Otros consejos

Include your services before your controllers so the service is known at time of injection

Can you try switching to app.service('similarArtistsService', function($http) {}); since this will return the function instance as opposed to factory which will return the value.

When you declare your dependencies in AngularJS, don't close off the array until after the function. See square brackets of array:

controllers.js

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

services.js

app.factory('similarArtistsService', ['$http', function($http) {
  // code in here
}]);
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top