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

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


javascript angularjs angularjs-module
person Martinsos    schedule 22.03.2014    source источник

Ответы (1)


arrow_upward
15
arrow_downward

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

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

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

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

person dmahapatro    schedule 22.03.2014