Почему установка переменной приложения является "плохой практикой" в angularJS?

Я просмотрел ряд обучающих руководств и стилей angularJS и нашел такие комментарии (от Тодд-девиза)

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

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

Сначала я изучил технику "Плохая" на примере и с тех пор увидел пару ссылок (кроме этого), в которых говорится, что "Плохая" техника... хорошо Плохая.

Никто до сих пор в моих поисках говорит, ПОЧЕМУ это плохо?

Изменить: Почему этот вопрос отличается? Хотя различия между этим и предлагаемым дублирующимся вопросом являются незначительными, существуют два важных отличия:

"Какая практика?" это не то же самое, что "Почему это плохо?"... в то время как принятый ответ на другой вопрос подробно объясняет "почему", два вопроса, имеющих один и тот же ответ, недостаточно, чтобы быть заклейминным дубликатом.
Яркий поиск, используя точный текст, который я разместил в качестве заголовка для этого вопроса, не выявил предлагаемого дубликата. Возможно, SE следует рассмотреть возможность включения "дополнительных заголовков" в вопрос, чтобы улучшить поисковую информацию... но эта функция отсутствует, и кто-то другой, задающий тот же вопрос, что и мой, все равно не найдет другого вопроса.

Ответ 1

Глобальные переменные в целом обычно считаются плохой практикой, хотя angular сам по себе является глобальной переменной, поэтому я считаю, что это честно не та большая сделка, насколько вы последовательны.

Проблема может возникнуть, если вы сделаете что-то вроде этого случайно:

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

Внешние библиотеки могут перезаписывать переменную app и т.д. и т.д.

Вместо использования имени app вы также можете использовать имя, специфичное для вашего приложения...

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

Цепочка - это одно, но если вы разбиваете компоненты на отдельные файлы, вы всегда можете получить модуль с .module

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

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

Ответ 2

Весь смысл не использовать var module = angular.module('foo', []);, а затем использовать переменную. Ничего плохого в том, что ИМО, особенно если вы соедините это с browserify, и выполните следующие действия:

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();

Ну, что более важно, так это то, что вы не используете анонимные функции при определении этих контроллеров и фабрик.

Итак, вы

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

а затем

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

Таким образом вы отделяете фактический код от инъекции зависимостей Angular и деклараций и сохраняете все вещи AngularJS в одном месте.

Причина, по которой некоторые люди говорят вам, что первый подход плохой, - это то, что вы рассеиваете "Angular материал" повсюду, вынуждая сканировать весь код, чтобы перейти к фактическому "материалу".

Также попробуйте использовать Expression Expression Expression (IIFE) для инкапсуляции всего этого кода:

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