如何使用Angular.js发出HTTP请求？

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.js向Last.fm API发出HTTP请求,但我无法让它工作。我已经分离出我的Angular js文件,并使用Codekit将它们编译成一个名为scripts.js的单个js文件。编译文件的顺序是:

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.

在我的控制台中,我看到“错误:[$ injector:unpr]”,我学到了这意味着控制器无法解析依赖关系。在我的情况下,我相信它与我注入的服务有关,但我不知道错误在哪里。

4 个解决方案

#1

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.

没有它,Angular使用参数名来解决依赖关系。许多minifiers会破坏这些名字。

#2

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

在控制器之前包括您的服务,以便在注射时了解服务

#3

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.

你可以尝试切换到app.service('similarArtistsService',function($ http){});因为这将返回函数实例而不是将返回值的工厂。

#4

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

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

#1