AngularJS [$ injector：unpr]未知的提供者

Question

我試圖將服務注入控制器，我收到以下錯誤：

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 。 任何幫助，將不勝感激。

Answer 1

你正在重復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'）檢索現有模塊。

Answer 2

我不知道你重復模塊（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;
        }
    };

});