How to define controllers in separate files

Question

Suppose that I have an SPA written via AngularJS 1.x.

It has a single app module defined like this:

var app = angular.module('app', ['ngAlertify', 'ngRoute', 'ui.bootstrap'])

I also have several controllers which are defined in separate *Ctrl.js-files. What is the appropriate way to define them?

I see two options here. The first one is

app.controller('LoginCtrl', function($scope) { /* ... */ });

and the second one is

angular.module('app').controller('LoginCtrl', function($scope) { /* ... */ });

Which one is better and most common-used practice? Is there any downsides of using either of them?

@tanmay I guess that the order of `include`s is important here anyway — FrozenHeart, Feb 24 '17 at 10:20
Possible duplicate of [Best way of defining controller in angularJs](http://stackoverflow.com/questions/32268718/best-way-of-defining-controller-in-angularjs) — bipin patel, Feb 24 '17 at 10:22
check http://stackoverflow.com/questions/32268718/best-way-of-defining-controller-in-angularjs — bipin patel, Feb 24 '17 at 10:23
Possible duplicate of [How to separate angularjs files without using global scope](http://stackoverflow.com/questions/41307696/how-to-separate-angularjs-files-without-using-global-scope) — Estus Flask, Feb 24 '17 at 10:43
@SaurabhAgrawal haha ok. I actually knew it so thought of asking it how it is accesible outside instead of writing an answer. So lazy, poof! thanks anyway — tanmay, Feb 24 '17 at 11:22

score 1 · Answer 1 · answered Feb 24 '17 at 10:22

My personal preference is to use app.controller('LoginCtrl', function($scope) { /* ... */ }); as this makes it easier to reuse the controller in another project with little to no changes, without those annoying module not found errors because you forgot to rename the module when reusing the file

score 1 · Answer 2 · answered Feb 24 '17 at 10:26

I think that depends a bit on the personal style of writing. One thing is that while working with AngularJS 1.x.x you can have different styles of writing code, method stacking etc.

Personally, I prefer app.controller('LoginCtrl', function($scope) { /* ... */ }); mainly because you can easily preview your controller and distinguish it from thge module. Another bonus I see of having a clearly defined separate module is that you can easily check what includes you have ('ngAlertify', 'ngRoute', 'ui.bootstrap').

Most commonly used as far I have seen, even here on SO, is the method that I previously mentioned. Yet again this is something that is more reflective of personal style rather than strong pre-requirements of writing code. I hope that helps to some extend.

score 1 · Answer 3 · edited May 23 '17 at 10:29

None of the above. The purpose of modules is to keep the application modular and not pollute global scope.

You can have var app = ... but this should be done inside IIFE once per file.

Another issue with modules is the precedence. If the application uses angular.module('app') module getter, the files should be loaded in specific order, in order for the module to be defined when it is retrieved in other files. This creates problems if they aren't, for example when they are concatenated in alphabetic order.

The solution is to use one module per file. This makes the application truly modular, independent of file loading order, also benefits testability. See also this answer for how this pattern supposed to work.

score 1 · Accepted Answer · answered Feb 24 '17 at 10:37

If I understand your question correctly then you wan to know different between

app.controller('LoginCtrl', function($scope) { /* ... */ });

vs

angular.module('app').controller('LoginCtrl', function($scope) { /* ... */ });

In above two in first method app is a global object which you declared somewhere i.e. in app.js like

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

In this case app is a global variable which will be accessible throughout your entire application. which I believe is not a good thing to use global variable in our application.

In second method we are using global angular object to create a controller so that in this we will not be using global variable. In this case app.js will look like

(function(){
  'use strict';
  var app = angular.module('app', []);
    ....
    ....
    ....
    ....
})

In this case app variable will not be available anywhere apart from this file.

So I belive second method is better than first one.

So the second approach is preferred for `Browserify`, right? — FrozenHeart, Feb 24 '17 at 10:47

score 1 · Answer 5 · answered Feb 24 '17 at 10:45

You can use module setter and getter methods for implementation of controllers in different file.

Suppose myApp.module.js

angular.module('myApp', []); //Setter method, registring module

In myApp.homeCtrl.js

var myApp = angular.module('myApp'); // getter method, getting the module already registered.
myApp.controller('homeCtrl', [function()]{ })

For more info check this https://toddmotto.com/angular-modules-setters-getters/

The second approach your are taking about is better because it uses the already created module and doesn't create the new module but with the first approach you are using global variable that is not recommended

How to define controllers in separate files

5 Answers5