Angular Dependency Injection，如果将控制器，服务等分离到单独的模块中

Question

so I have my main module as such :

var app =  angular.module('LookupTool', ['ngRoute','controllers','services']);

and then my services in a seperate services.js file

var services = angular.module('services',[]);

services.factory('WebServices',function(){
...
});

and then my controllers in a separate controller.js file

var mainControllers = angular.module('controllers',[]);

mainControllers.controller('SearchCtrl', function ($scope) {

});

Now my question is with this level of modularity how do I inject my services into my controller, and is this a best practice set up?

Answer 1

var mainControllers = angular.module('controllers',['services']);

mainControllers.controller('SearchCtrl', function ($scope,WebServices) {

});

I don't think it is right to setup in this way,modules should be business module and each module should contain its own controllers,services etc.

For example,for a university domain module can be like attendance,examination,reports etc.

Answer 2

You can use it in following way provided your service is as follows

    services.factory('WebServices',function(){
    var webService= new WebService();
    return webService;
    ...
    });

and have a function like

function WebServices(required angular variables)
{
..
}

.. add some prototype functions if required..

. This will be your actual service.

After that you can access it in following way

mainControllers.controller('SearchCtrl', function ($scope, webServices) {
$scope.webService= webService
});