Question

我正在尝试使用Angular.js向Last.fm API发出HTTP请求，但我无法让它工作。我已经分离出我的Angular js文件，并使用Codekit将它们编译成一个名为scripts.js的单个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使用参数名来解析依赖关系。许多minifiers会破坏这些名字。

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

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

app.js

controllers.js

services.js

的index.html

4 个答案: