В чем разница между службой, директивой и модулем?

Я читал много документов, и я все больше и больше путаюсь. Я в принципе не могу понять разницу между

• служба
• директива
• модуль

Я вижу много пользовательских компонентов. Иногда они используют директивы, иногда сервисы. Это всегда начинается с модуля. Может кто-нибудь объяснить на примере, в чем разница между этими тремя типами?

Думайте о модуле как о месте для подключения ряда других вещей, таких как директивы, сервисы, константы и т. Д. Модули могут быть внедрены в другие модули, обеспечивая высокий уровень повторного использования.

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

Сервисы - это в основном способ связи между контроллерами, но вы можете внедрить один сервис в другой. Службы часто используются как способ добраться до ваших хранилищ данных, и люди обернутся в угловые API, такие как ngResource. Этот метод полезен, поскольку делает тестирование (особенно насмешливое) довольно простым. У вас могут быть услуги для других вещей, таких как аутентификация, ведение журнала и т. Д.

Директивы используются для создания виджетов или упаковки существующих вещей, таких как плагины jquery. Обертывание существующих плагинов может быть проблемой, и причина, по которой вы это сделаете, заключается в установлении двусторонней привязки данных между плагинами и angular. Если вам не нужна двусторонняя привязка данных, вам не нужно оборачивать их.

Директива также является местом для манипулирования DOM, перехвата DOM-событий и т. Д. Вы не должны делать вещи, связанные с DOM, в контроллерах или сервисах. Создание директив может быть довольно сложным. ИМХО, я рекомендую сначала взглянуть на API для чего-то, что может сделать то, что вы ищете ИЛИ обратиться за советом в Google Group из Angular.

Из моих личных заметок (в основном фрагменты из документов, сообщений группы Google и сообщений SO):

Модули

• предоставить способ для пространства имен / групповых служб, директив, фильтров, информации о конфигурации и кода инициализации
• помочь избежать глобальных переменных
• используются для настройки $ инжектора, позволяя вводить вещи, определенные модулем (или самим модулем в целом), где-либо еще (Dependency Injection)
• Угловые модули не связаны с CommonJS или Require.js. В отличие от модулей AMD или Require.js, модули Angular не пытаются решить проблему упорядочения загрузки скриптов или отложенного извлечения скриптов. Эти цели являются ортогональными, и обе модульные системы могут жить бок о бок и выполнять свои цели (так утверждают документы).

Сервисы

• являются синглетонами, поэтому существует только один экземпляр каждого сервиса, который вы определяете. Как синглтоны, они не зависят от областей действия и, следовательно, могут быть доступны (совместно использованы) с несколькими представлениями / контроллерами / директивами / другими службами
• Вы можете (и, вероятно, должны) создавать пользовательские службы, когда
  • две или более вещи нуждаются в доступе к одним и тем же данным (не используйте корневую область) или вы просто хотите аккуратно инкапсулировать свои данные
  • вы хотите инкапсулировать взаимодействия, скажем, с веб-сервером (добавьте $ resource или $ http в ваш сервис)
• Встроенные сервисы начинаются с '$'.
• Чтобы использовать сервис, требуется внедрение зависимости от зависимого (например, на контроллере, или другом сервисе, или директиве).

Директивы (некоторые из пунктов ниже говорят, по сути, одно и то же, но я обнаружил, что иногда немного другая формулировка очень помогает)

• несут ответственность за обновление DOM при изменении состояния модели
• расширить словарный запас HTML = научить HTML новым трюкам.
  Angular поставляется со встроенным набором директив (например, ng- * stuff), которые полезны для создания веб-приложений, но вы можете добавить свои собственные, так что HTML можно превратить в декларативный домен-специфический язык (DSL). Например, элементы <tabs> и <pane> на демонстрационной домашней странице Angular «Создание компонентов».
  • Неочевидные встроенные директивы (потому что они не начинаются с «ng»): a, form, input, script, select, textarea. Под Angular все это делает больше, чем обычно!
• Директивы позволяют «компонентизировать HTML». Директивы часто лучше, чем ng-include. Например, когда вы начинаете писать много HTML-кода, главным образом с привязкой к данным, рефакторируйте этот HTML-код в (повторно используемые) директивы.
• Компилятор Angular позволяет вам присоединять поведение к любому элементу или атрибуту HTML и даже создавать новые элементы или атрибуты HTML с настраиваемым поведением. Angular называет эти директивы расширений поведения .
  • Когда вы все сводите, директива - это просто функция, которая выполняется, когда компилятор Angular встречает ее в DOM.
• Директива - это поведение или преобразование DOM, которое вызывается наличием атрибута, имени элемента, имени класса или имени в комментарии. Директива - это поведение, которое должно запускаться при обнаружении определенных конструкций HTML в процессе компиляции (HTML). Директивы могут быть размещены в именах элементов, атрибутах, именах классов, а также в комментариях.
  • Большинство директив ограничены только атрибутом. Например, DoubleClick использует только пользовательские директивы атрибутов.
• см. также Что такое директива angularjs?

Определите и сгруппируйте вещи Angular (вводимые зависимости) в модули.
Делитесь данными и оборачивайте взаимодействие веб-сервера в сервисах.
Расширяйте HTML и выполняйте DOM-манипуляции в директивах.
И сделать контроллеры как можно более «тонкими».