Why is setting an app variable a 'bad practice' in angularJS?

Question

I've looked at a number of angularJS tutorials and style guides and have found comments like this (from Todd Motto)

Bad:
var app = angular.module('app', []);
app.controller();
app.factory();

Good:
angular
  .module('app', [])
  .controller()
  .factory();

I first learned the "Bad" technique by example and have since seen a couple of reference (other than this one) that say the "Bad" technique is ...well Bad.

Nobody so far in my searches says WHY it is bad?

Edit: Why is this question different? While the differences are subtle between this and the proposed duplicate question, there are two important differences:

1. 'What is the best practice?' is not the same as 'Why is it bad?'...while the accepted answer to the other question elaborates on 'Why', the two questions having the same answer is not sufficient be branded a duplicate.

2. A vigorous search, using the exact text that I placed as the title to this question did not reveal the proposed duplicate. Perhaps SE should consider allowing "optional titles" to be added to a question to enhance searchablity...but that feature is not in place and someone else asking the same question as mine will still not find the other question.

Answer 1

Global variables in general tend to be considered bad practice, although angular itself is a global variable so I think that it's honestly not that big of a deal as long as you are consistent.

Problem can arise if you do something like this accidentally:

app = angular.module("app");
// some other file
app = somethingNotAnAngularModule();

External libraries might overwrite the variable app, etc. etc.

Instead of using the name app, you could also use a name that is specific to your app...

dustrModule = angular.module("dustr", []);

---

Chaining is one thing, but if you are splitting up components into separate files you can always get the module with .module

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

// LoginCtrl.js
angular.module("app").controller("LoginCtrl", LoginCtrl);

Answer 2

The whole point of not using var module = angular.module('foo', []); and then using the variable is purely opinionated though. Nothing bad in doing that IMO especially if you couple that with browserify for example and the do this:

foo/FooModule.js:

var ng = require('angular');

module.exports = ng.module('Foo', []);

foo/FooController.js:

var FooModule = require('foo/FooModule');

function FooController() {
    this.bar = 'bar';
}

FooModule.controller('FooController', FooController);

module.exports = FooController;

foo/FooRoutes.js:

var Router = require('base/Router');
var FooController = require('foo/FooController');

function initialize() {
    Router.route('/foo', 'FooController as foo');
}

module.exports = initialize;

main.js:

var FooRoutes = require('foo/FooRoutes');

FooRoutes();

---

Well, more important than this is that you don't use anonymous functions when defining those controllers and factories.

So you'd

function MyCtrl($dep1) { ... }
function MyFactory() { ...}

and then

angular.module()
    .controller('my', ['$dep1', MyCtrl])
    .factory('fac', MyFactory);

That way you separate actual code from Angular dependency injection and declarations and keep all AngularJS stuff in one place.

The reason some people tell you the first approach is bad is because you're scattering the "Angular stuff" all over the place, having to scan the whole code to get to the actual "stuff".

Also try and use an Immediately-Invoked Function Expression (IIFE) to encapsulate all of this code:

(function(){ /* code */ }());