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

Question

我正在尝试使用Angular.js向Last.fm API发出HTTP请求，但无法正常工作。 我已经分离出我的Angular js文件，并使用Codekit将它们编译成一个单独的js文件，称为scripts.js。 文件的编译顺序为：

• 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]”，这意味着控制器无法解析依赖性。 就我而言，我认为这与我要注入的服务有关，但是我不知道错误在哪里。

Answer 1

编译脚本也会缩小它们吗？ 如果是这样，则需要在数组中声明依赖项...

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将使用参数名称来解决依赖关系。 许多缩小器粉碎了这些名称。

Answer 2

在您的控制器之前包括您的服务，以便在注入时知道该服务

Answer 3

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

Answer 4

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