Angularjs中与控制器分开的服务

Question

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

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调用单独文件中定义的服务angular.module('myApp.services',[]) .factory('ContactService', function(Restangular){ var Contacts = Restangular.all('contacts'); return { getAll : function(){ return Contacts.getList().$object; } }; }); ： ContactService .js

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

问题是当我试图调用此控制器时出现以下错误：

  

错误：[$ injector：unpr]未知提供者：ContactServiceProvider＆lt; -   的ContactService   http://errors.angularjs.org/1.2.19/ $注射器/ unpr？P0 = ContactServiceProvider％20％3 C-％20ContactService

我该如何解决？

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

我在app.js：

fieldnames

在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：在index.html中看到js文件注入的顺序后，我发现了主要问题。

文件脚本的顺序错误。在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>

Answer 2

尝试包含

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

而不是

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

欢呼声

Answer 3

似乎通过重新排序我的js文件的导入来解决问题，如下所示：

app.js然后是文件服务，然后是控制器。