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.
4 answers
solution1
2 ACCPTED 2014-02-13 19:03:51
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.
solution2
0 2014-02-13 19:04:49
在您的控制器之前包括您的服务，以便在注入时知道该服务
solution3
0 2014-02-13 19:24:43
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.
solution4
0 2014-02-13 19:26:03
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
}]);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.