1

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

  • angular.min.js
  • 应用程序.js
  • 控制器.js
  • 服务.js

这是我的文件的样子：

应用程序.js

var app = angular.module('app', []);

控制器.js

app.controller('similarArtistsController', function($scope, similarArtistsService) {

    $scope.artists = [];

    similarArtistsService.getArtists().success(function(response) {

        console.log(response);
    });

});

服务.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;
});

索引.html

<body>

    <div ng-app="app">

        <div ng-controller="similarArtistsController"></div>

    </div>

    <script src="/js/compiled/scripts.js"></script>

</body>

在我的控制台中，我看到“错误：[$injector:unpr]”，我了解到这意味着控制器无法解析依赖项。就我而言，我相信它与我正在注入的服务有关，但我不知道错误在哪里。

4

4 回答 4

2

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

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

于 2014-02-13T19:03:51.420 回答
0

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

于 2014-02-13T19:04:49.287 回答
0

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

于 2014-02-13T19:24:43.210 回答
0

当你在 AngularJS 中声明你的依赖时，不要在函数之后关闭数组。参见数组的方括号：

控制器.js

app.controller('similarArtistsController', ['$scope', 'similarArtistsService', function($scope, similarArtistsService) {
  // code in here
}]);

服务.js

app.factory('similarArtistsService', ['$http', function($http) {
  // code in here
}]);
于 2014-02-13T19:26:03.907 回答