Angularjs中与控制器分开的服务

Question

我想在angularjs应用程序中将服务与控制器分开,我是按照以下方式完成的:

的app.js有:

var myApp = angular.module('myApp',['restangular','ui.router','myApp.controllers','myApp.services']);

的controllers.js:

 angular.module('myApp.controllers',[]);

的services.js:

angular.module('myApp.services',[]);

我有一个与以下相关的控制器controllers.js:

angular.module('myApp.controllers',[]).controller('ContactController', ContactController);

ContactController.$inject = [ '$scope', 'ContactService' ];
function ContactController($scope, ContactService) {
     console.log("here call ctrl contact");
     $scope.contacts = ContactService.getAll(); 
}

这将ContactController调用ContactService在单独文件中定义的服务:ContactService .js

angular.module('myApp.services',[])

.factory('ContactService', function(Restangular){
    var Contacts = Restangular.all('contacts');

    return {
        getAll : function(){
            return Contacts.getList().$object;
        }
    };

});

问题是,当我试图调用此控制器时,我收到以下错误:

错误:[$ injector:unpr]未知提供者:ContactServiceProvider < - ContactService http://errors.angularjs.org/1.2.19/ $ injector/unpr？p0 = ContactServiceProvider%20%3C-%20ContactService

我该如何解决这个问题？

更新:这是我的应用程序的结构:

我在app.js:

.state('contacts', {
        url: '/contacts',
        templateUrl: 'templates/contacts.html',
        controller: 'ContactController'
    })  
    .state('todos', {
        url: '/todos',
        templateUrl: 'templates/todos.html',
        controller: 'TodoController'
    })

在index.html我导入了所有的js文件:

Answer 1

一旦用m初始化模块,angular.module('myApp.controllers', [])再次使用第二个参数依赖项([])

所以,在你的控制器中,

 `angular.module('myApp.controllers',[])` should be `angular.module('myApp.controllers')`

所以,

angular
  .module('myApp.controllers')
  .controller('ContactController', ContactController);
ContactController.$inject = ['$scope', 'ContactService'];
function ContactController($scope, ContactService) {
  console.log('here call ctrl contact');
  $scope.contacts = ContactService.getAll();
}

这同样适用于您的服务/工厂,

angular.module('myApp.services')
.factory('ContactService', function(Restangular){
    var Contacts = Restangular.all('contacts');

    return {
        getAll : function(){
            return Contacts.getList().$object;
        }
    };

});

PS:看到你的js文件注入的顺序后,index.html我发现了主要问题.

文件脚本的顺序是错误的.在ContactController您正在使用contactService之前没有定义的.因此,请index.html按如下所示更改脚本顺序.

<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/services/ContactService.js"></script>
<script src="js/services/TodoService.js"></script>
<script src="js/controllers/HomeController.js"></script>
<script src="js/controllers/ContactController.js"></script>
<script src="js/controllers/TodoController.js"></script>