1

Angular.js を使用して Last.fm API に HTTP リクエストを送信しようとしていますが、うまくいきません。Angular js ファイルを分離し、Codekit を使用して scripts.js と呼ばれる 1 つの 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>

コンソールに「Error: [$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

app.service('similarArtistsService', function($http) {});値を返す factory とは対照的に、これは関数インスタンスを返すため、に切り替えてみてください。

于 2014-02-13T19:24:43.210 に答える
0

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
}]);
于 2014-02-13T19:26:03.907 に答える
0

インジェクション時にサービスが認識されるように、コントローラーの前にサービスを含めます。

于 2014-02-13T19:04:49.287 に答える