AngularJS Modules and External Controllers

Question

I have a page containing multiple containers. Each container will have its own controller but point to one factory, which handles all the logic interacting with a web service API. I would like to have a separate file for each controller BUT I want all of this inside of one module. for the life of me I cannot find how to include controllers from different files into one modules.

//file 1
MyController ....

//file 2
MyOtherController

//file 3
MyFactory

//file 4
The Module

The module would be composed of MyController, MyOtherController and MyFactory defined in three separate files. Can someone help with this or point me to a good resource? Thanks!

Answer 1

You can think of a module as a container for the different parts of your app – controllers, services, filters, directives, etc. To access a container just call its module name for example

//file.4

angular.module("theModule",[]);

now that you have declared main module within angular now you can access mainModule from anywhere using angular

//file 1

angular.module("theModule").controller("MyController",[function(){...}]);

//file 2

angular.module("theModule").controller("MyOtherController",[function(){...}]);

//file 3

angular.module("mainModule").factory("MyFactory",[function(){...}]);

Check out the documentation for more information.

I also suggest reading Google's style guide and conventions manual

Also read about setting up app structure for maintainability

Answer 2

Here is a example of an Angular module setup I am using in an app that allows a separate external file for each module type. Note that the app must load before the external files. Tested on Angular 1.4.9.

Index.html

<script src="bower_components/angular/angular.min.js"></script>
<script src="js/ng-app.js"></script>
<script src="js/ng-factories.js"></script>
<script src="js/ng-directives.js"></script>
<script src="js/ng-controllers.js"></script>

ng-app.js

var app = angular.module('myApp', [
    'factories',
    'directives',
    'controllers'
]);

ng-controllers.js

//note: I am injecting the helloFac factory as an example
var ctrl = angular.module('controllers', []);

ctrl.controller('MyCtrl', ['$scope', 'helloFac', function($scope, helloFac) {
    console.log(helloFac.sayHello('Angular developer'));
}]);

ng-directives.js

angular.module('directives',[])
    .directive('test', function () {
        return {
            //implementation
        }
    })
    .directive('test2', function () {
            return {
                //implementation
            }
    });

ng-factories.js

var factories = angular.module("factories", []);

factories.factory('helloFac', function() {
    return {
        sayHello: function(text){
            return 'Hello ' + text;
        }
    }
});