Разница между сервисом, директивой и модулем

Ответ 1

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

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

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

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

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

Ответ 2

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

Модули

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

Услуги

• - синглтоны, поэтому есть только один экземпляр каждой службы, которую вы определяете. В качестве синглтонов они не зависят от областей видимости и, следовательно, могут быть доступны (совместно с) несколькими представлениями/контроллерами/директивами/другими службами.
• Вы можете (и, вероятно, должны) создавать пользовательские службы, когда
  • две или более вещи нуждаются в доступе к тем же данным (не используйте корневую область) или просто хотите аккуратно инкапсулировать свои данные.
  • вы хотите инкапсулировать взаимодействия с, скажем, с веб-сервером (расширьте $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 в директивах.
И сделайте контроллеры "худшими", насколько это возможно.