angular.module called from separate files, does not find Controller [duplicate]

Question

This question already has an answer here:

angular.module requires doesn't work (1 answer)

Closed 5 years ago.

I am trying to modularize my code and moved controller in a separate file that uses same module. But, it does not load, I made sure the load order is correct.

// app.js
angular.module("app", []);

// LoginCtrl.js
angular.module("app", []).controller("LoginCtrl", function() 
{
  //doSomeThing
});

If I do var app = angular.module in first file and use the same variable in other files, it works.

// app.js
var app = angular.module("app", []);

// LoginCtrl.js
app.controller("LoginCtrl", function() 
{
  //doSomeThing
});

If I move all code in one file and use angular.module separately for each component, it works.

// app.js
angular.module("app", []);

angular.module("app", []).controller("LoginCtrl", function() 
{
  //doSomeThing
});

Am I missing something?

Answer 1

To create a module in AngularJS:
angular.module('app', []);

To get a module in AngularJS:
angular.module('app');

You use the same signature in your code to create and get a module, you mustn't add the injection array as the second argument of the module function when getting a module in another file.

Answer 2

Firstly,there can be only one module in a controller. This is an example var app = angular.module('myApp', []) .controller('Controllername', function () {};

Answer 3

After modulerizing your code, write this in your LoginCtrl.js file:

var app = angular.module("app");
app.controller("LoginCtrl", function() {
...