Angular - Лучшая практика структурирования модулей

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

App.controllers
App.services
....

angular.module('App', [App.controllers, App.services ...);

Этот пример кода, скорее всего, будет неправильным, но дело в том, чтобы группировать контроллеры, службы и т.д. вместе в одном пространстве имен.

Может ли кто-нибудь расширить этот подход?

Ответ 1

Организация корпоративного проекта

Способ организации моего проекта angular:

/app
  /img         # application-level images
  /css         # application-level css styles
  /js          # application-level javascripts
  /modules             # application modules
          /gallery               # independent module with its own infrastructure
                 /controllers    # gallery module controllers
                 /css            # gallery module css styles
                 /directives     # gallery module directives
                 /img            # gallery module images
                 /filters        # gallery module filters
                 /services       # gallery module services
                 /views          # gallery module views (htmls)
                 / ...           # other gallery module component folders
                 galleryMod.js   # the module itself

          /user                  # independent module with its own infrastructure
                 /controllers    # user module controllers
                 / ...           # other user module component folders
                 userMod.js      # the module itself

          / ...                  # other modules

  / ...                # other application-level folders
  index.html

Альтернативная организация проектных организаций (упрощенная)

/app
  /img         # application-level images
  /css         # application-level css styles
  /js          # application-level javascripts
  /modules             # application modules
          /gallery               # independent module with its own infrastructure
                 /js             # gallery module javascripts (includes 
                                 # services.js, directives.js, filters.js, ...)
                 /css            # gallery module css styles
                 /img            # gallery module images
                 /views          # gallery module views (htmls, "partials")
                 / ...           # other gallery module component folders
                 galleryMod.js   # the module itself

          /user                  # independent module with its own infrastructure
                 /controllers    # user module controllers
                 / ...           # other user module component folders
                 userMod.js      # the module itself

          / ...                  # other modules

  / ...                # other application-level folders
  index.html

Средняя организация проекта (без модулей)

/app
  /img            # application images
  /css            # application css styles
  /controllers    # application controllers
  /directives     # application directives
  /filters        # application filters
  /services       # application services
  /views          # application views (htmls)
  / ...           # other component folders
  index.html

Простая организация проекта (как семя)

/app
  /img            # application images
  /css            # application css styles
  /js             # application javascripts (includes 
                  # services.js, directives.js, filters.js, ...)
  /views          # application views (htmls), e.g. partials
  / ...           # other component folders
  index.html

Используйте способ, которым должен быть организован ваш проект, и не выбирайте способ, который излишне усложняет ваш проект.

Ответ 2

Этот подход предоставляется Angular Seed и его только один из способов orginize структуры приложения. Это полезно для отладки: если вы видите ошибку в некоторой службе, переходите к services.js и ловите ее.

Brain Ford в своей статье Создание приложений Huuuuuge с помощью AngularJS написал:

Единственный оставшийся вопрос заключается в том, как подразделить контроллеры, директивы, службы и фильтры на модули. Angular Seed помещает фильтры, службы и директивы в отдельные модули, но для меня это кажется немного глупым. В зависимости от приложения, я был бы более склонным к организации модулей по страницам/маршрутам. С точки зрения производительности, на самом деле не имеет значения, как вы организуете свои модули, поэтому выберите любой метод, наиболее подходящий для вашего проекта.

Он также предлагает разные структуры приложений, где каждая директива или служба является одним отдельным файлом (см. статью выше).

Ответ 3

Из Руководство по дизайну John Pappa AngularJS. Это становится стандартной структурой Angular для более крупных приложений.

Структура папок по функциям: Создавайте папки с именем для функции, которую они представляют. Когда папка растет, чтобы содержать более 7 файлов, начните рассматривать создание для них папки. Ваш порог может быть другим, поэтому при необходимости отрегулируйте его.

Почему?: Разработчик может найти код, определить, что каждый файл представляет с первого взгляда, структура плоская, как может быть, и нет повторяющихся или избыточных имен.

Почему?: Руководящие принципы LIFT охвачены.

Почему?: Помогает снизить нагрузку на приложение путем организации контента и поддержания их соответствия рекомендациям LIFT.

Почему?: Когда есть много файлов (10+), их легче найти с помощью последовательных структур папок и сложнее в плоских структурах.

/**
 * recommended
 */

app/
    app.module.js
    app.config.js
    app.routes.js
    components/       
        calendar.directive.js  
        calendar.directive.html  
        user-profile.directive.js  
        user-profile.directive.html  
    layout/
        shell.html      
        shell.controller.js
        topnav.html      
        topnav.controller.js       
    people/
        attendees.html
        attendees.controller.js  
        speakers.html
        speakers.controller.js
        speaker-detail.html
        speaker-detail.controller.js
    services/       
        data.service.js  
        localstorage.service.js
        logger.service.js   
        spinner.service.js
    sessions/
        sessions.html      
        sessions.controller.js
        session-detail.html
        session-detail.controller.js