Как объявить подмодули в AngularJS

При работе над большими проектами в AngularJS я обнаружил, что мне нравится организовывать код по функциональности.
Это означает, что когда у меня есть какая-то узнаваемая функциональность X (особенно если она многократно используется), я создаю каталог X и помещаю в него все контроллеры, службы и другие части, принадлежащие этой функциональности. Я также объявляю новый модуль под названием X и назначаю все в каталоге X этому модулю.

Структура каталога будет выглядеть примерно так:

scripts/
  app.js
  controllers/
  services/
  directives/
  filters/
  X/
    controllers/
    services/
    directives/
    filters/

В app.js есть объявление основного модуля:

angular.module('myApp', ['X']);

Все контроллеры и т.д. в X/принадлежат модулю "X" , что означает, что я извлекаю модуль "X" , как это в этих файлах:

var X = angular.module('X');

Что я не знаю, как это сделать, где объявить модуль "X" ?

Некоторые идеи, которые у меня были:

Я могу объявить его в одном из контроллеров/сервисов/... и получить его в других контроллерах и т.д., но это звучит не так, потому что я не вижу никакой логики, как выбрать этот контроллер/сервис/... среди прочего, а затем я должен позаботиться о том, чтобы включить его в index.html перед другими. Я нахожу эту идею bad.
Я могу поместить объявление в app.js, поэтому app.js теперь будет выглядеть как angular.module('myApp', ['X']); angular.module('X', [/*some dependencies could go here*/]);
Я нахожу эту идею лучше, чем предыдущая, но мне не нравится, что объявление модуля находится вне каталога X.
В каталоге X/I создаем файл main.js и помещаем в него объявление модуля X. Я должен быть осторожным, чтобы включить этот файл в index.html перед другими файлами из каталога X/.
Мне нравится это решение лучший.

Есть ли лучший способ сделать это?

Ответ 1

Да. Третий вариант - это лучшее решение. Первый вариант определенно даст боль в шее. Второй вариант добавляет зависимость модуля X в основном приложении, что нежелательно. Вы хотите, чтобы ваш модуль был автономным. Таким образом, третий вариант - лучшее решение.

Вот рекомендации рекомендации по лучшей практике от Google, которые вы на самом деле пытаетесь придерживаться.:) Кроме того, для вас также будет отлично (как рекомендовано лучшей практикой Google) не отделять файлы от артефактов, а это значит, что вам не нужны структуры контроллеров, директив и т.д., Как показано ниже. Также обратите внимание на частичные, CSS и даже тесты в компоненте, содержащиеся в каталоге компонента/модуля. Следовательно, модуль полностью содержится и независим, что помогает в повторном использовании:

sampleapp/ 
  app.css
  app.js                        
  app-controller.js
  app-controller_test.js
  components/
    bar/                                "bar" describes what the service does
      bar.js
      bar-service.js
      bar-service_test.js
      bar-partial.html
    foo/                                "foo" describes what the directive does
      foo.js
      foo-directive.js
      foo-directive_test.js
      foo-partial.html
  index.html

Я надеюсь, что это будет полезно.