web-dev-qa-db-ja.com

AngularJS [$ injector：unpr]不明なプロバイダー

コントローラにサービスを注入しようとしていますが、次のエラーが発生します。

Error: [$injector:unpr] Unknown provider: employeeServiceProvider <- employeeService
http://errors.angularjs.org/1.3.0-beta.17/$injector/unpr?p0=employeeServiceProvider%20%3C-%20employeeService
    at http://localhost:9082/angularJSDemo/js/lib/angular.js:78:12
    at http://localhost:9082/angularJSDemo/js/lib/angular.js:3894:19
    at Object.getService [as get]

コードは plunker です。任意の助けいただければ幸いです。

angularjsangularjs-service
9
JavaKB

既に追加されているモジュールにアタッチされているエンティティをすべてクリアし、モジュールを再作成するすべての場所でangular.module('demoApp', [])を繰り返しています。モジュールの初期化後に、その参照を使用するか、単にangular.module('demoApp').service...を使用する必要がありますこれにより、サービスなどを追加できるモジュールが取得されます。

var module = angular.module('demoApp', []).controller('employeeController', function($scope, employeeService) {
    $scope.employees = employeeService.getData();
});


module.factory('employeeService', function (){
    return {
        getData : function(){
            var employees = [{name: 'John Doe', id: '1'}, 
                                {name: 'Mary Homes', id: '2'},
                                {name: 'Chris Karl', id: '3'}
                                ];

            return employees;
        }
    };

});

デモ

Docからの引用 ：-

Angular.module（ 'myModule'、[]）を使用すると、モジュールmyModuleが作成され、myModuleという名前の既存のモジュールが上書きされることに注意してください。 angular.module（ 'myModule'）を使用して、既存のモジュールを取得します。

18
PSL

モジュール（demoApp）の作成を繰り返す理由がわかりません。 6行目で、問題の原因であるdemoAppモジュールを作成しようとしました。コードは次のようになります。

angular.module('demoApp', [])
.controller('employeeController', function($scope, employeeService) {
    $scope.employees = employeeService.getData();
})
.factory('employeeService', function (){
    return {
        getData : function(){
            var employees = [{name: 'John Doe', id: '1'}, 
                                {name: 'Mary Homes', id: '2'},
                                {name: 'Chris Karl', id: '3'}
                                ];

            return employees;
        }
    };

});

または

var demoApp=angular.module('demoApp', [])
.controller('employeeController', function($scope, employeeService) {
    $scope.employees = employeeService.getData();
});

demoApp.factory('employeeService', function (){
    return {
        getData : function(){
            var employees = [{name: 'John Doe', id: '1'}, 
                                {name: 'Mary Homes', id: '2'},
                                {name: 'Chris Karl', id: '3'}
                                ];

            return employees;
        }
    };

});

の代わりに

angular.module('demoApp', []).controller('employeeController', function($scope, employeeService) {
    $scope.employees = employeeService.getData();
});


angular.module('demoApp', []).factory('employeeService', function (){
    return {
        getData : function(){
            var employees = [{name: 'John Doe', id: '1'}, 
                                {name: 'Mary Homes', id: '2'},
                                {name: 'Chris Karl', id: '3'}
                                ];

            return employees;
        }
    };

});

コントローラをサービスとは別のファイル（これは推奨）に保存したい場合は、abcController.jsとして次のようなものがあると考えることができます

angular.module('demoApp', ['demoApp.employeeController']).controller('employeeController', function($scope, employeeService) {
    $scope.employees = employeeService.getData();
});

およびxyzService.js

angular.module('demoApp.employeeController', []).factory('employeeService', function (){
    return {
        getData : function(){
            var employees = [{name: 'John Doe', id: '1'}, 
                                {name: 'Mary Homes', id: '2'},
                                {name: 'Chris Karl', id: '3'}
                                ];

            return employees;
        }
    };

});
3
Paullo