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

Question

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.

Anthony Chu · Accepted Answer · 2014-02-13 19:03:51Z

2

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.

answered Feb 13, 2014 at 19:03

Anthony Chu

37.6k10 gold badges85 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Michael Lynch Over a year ago

Codekit does minify the scripts as well. I've added the dependencies for both the controller and service ($http) but it still isn't working. Now I am getting "Error: [ng:areq]."

Anthony Chu Over a year ago

Seems to be calling the service (and getting invalid api key error) when I try it. Fiddle... jsfiddle.net/K6GKA

Anthony Chu Over a year ago

Didn't see your updated question. The function needs to be in the array.

Michael Lynch Over a year ago

This does work. When I first added the dependencies, I closed the array too soon. Moving the closing bracket to the end of the controller and service worked.

jlzavitz · Accepted Answer · 2014-02-13 19:04:49Z

0

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

answered Feb 13, 2014 at 19:04

jlzavitz

111 silver badge

1 Comment

jlzavitz Over a year ago

worked for me when I had this bug a while back. Depends how you structure your application. My newest applications list all of the controllers, services, and filters in one object, and then they get binded separately. Making use of $provide, $compileProvider, $controllerProvider, $filterProvider can allow you to do this. example Object.each(hash['services'], function(k, v) { $provide.factory(k, v); });

user3307560 · Accepted Answer · 2014-02-13 19:24:43Z

0

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.

answered Feb 13, 2014 at 19:24

user3307560

1

Comments

Paul Sham · Accepted Answer · 2014-02-13 19:26:03Z

0

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

answered Feb 13, 2014 at 19:26

Paul Sham

3,2052 gold badges26 silver badges31 bronze badges

Collectives™ on Stack Overflow

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

app.js

controllers.js

services.js

index.html

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

app.js

controllers.js

services.js

index.html

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related