Яка різниця між сервісом, директивою та модулем?

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

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

Я бачу багато спеціальних компонентів. Іноді вони використовують директиви, іноді послуги. Це завжди починається з модуля. Чи може хтось пояснити на прикладі, яка різниця між цими трьома типами?

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

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

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

Директиви використовуються для створення віджетів або загортання існуючих речей, таких як плагіни jquery. Обгортання існуючих плагінів може бути проблемою, і причиною цього ви будете встановити двостороння прив'язка даних між плагінами та кутовими. Якщо вам не потрібно двостороннє прив'язування даних, тоді їх не потрібно обертати.

Директива також є місцем для маніпуляцій з DOM, лову DOM-подій тощо. Ви не повинні робити речі, пов'язані з DOM, у контролерах чи службах. Створення директив може стати досить складним. ІМХО, я рекомендую спершу подивитися на API, що може робити те, що ви шукаєте, АБО попросіть консультацію у групи Google від Angular.

З моїх особистих нотаток (в основному фрагменти з документів, публікації в гугл Google і публікації SO):

Модулі

• надають спосіб простору імен / групових послуг, директив, фільтрів, конфігураційної інформації та ініціалізаційного коду
• допомогти уникнути глобальних змінних
• використовуються для налаштування інжектора $, дозволяючи речам, визначеним модулем (або самим усім модулем), вводитись в інше місце (матеріали введення залежностей)
• Кутові модулі не пов'язані з CommonJS або Require.js. На відміну від модулів AMD або Require.js, кутові модулі не намагаються вирішити проблему впорядкування завантаження скриптів або ледачого отримання скриптів. Ці цілі є ортогональними, і обидві модульні системи можуть жити поряд і виконувати свої цілі (так стверджують документи).

Послуги

• є одинаковими, тому існує лише один примірник кожної визначеної вами послуги. Як одинаки, на них не впливають області застосування, а отже, до них можна отримати доступ (поділитися з ними) кількома переглядами / контролерами / директивами / іншими службами
• Ви можете (і, мабуть, повинні) створювати власні служби, коли
  • дві або більше речей потребують доступу до одних і тих же даних (не використовуйте кореневу область) або ви просто хочете акуратно інкапсулювати свої дані
  • ви хочете інкапсулювати взаємодії, скажімо, з веб-сервером (розширити $ ресурс або $ http у вашій службі)
• Вбудовані послуги починаються з "$".
• Для використання послуги потрібна ін'єкція залежності від залежної (наприклад, від контролера, іншої служби чи директиви).

Директиви (деякі пункти нижче говорять по суті про одне і те ж, але я виявив, що іноді дещо інше формулювання дуже допомагає)

• відповідають за оновлення DOM при зміні стану моделі
• розширити словник HTML = навчити HTML нових хитрощів.
  Angular поставляється із вбудованим набором директив (наприклад, ng- * stuff), які корисні для створення веб-додатків, але ви можете додати свої власні такі, що HTML може бути перетворений у декларативний мову, що визначається для домену (DSL). Наприклад, елементи <tabs> і <pane> на демонстраційній сторінці Angular home page "Створення компонентів".
  • Неочевидні вбудовані директиви (оскільки вони не починаються з "ng"): a, форма, введення, сценарій, select, textarea. Під Angular це все робить більше, ніж зазвичай!
• Директиви дозволяють "складати HTML". Директиви часто краще, ніж включають ng. Наприклад, коли ви починаєте писати багато HTML із головним чином пов'язаним даними, рефактор цього HTML в (багаторазове використання) директив.
• Кутовий компілятор дозволяє приєднувати поведінку до будь-якого HTML-елемента або атрибута і навіть створювати нові елементи HTML або атрибути з власною поведінкою. Кутовий називає ці директиви щодо розширень поведінки .
  • Коли ви все це звалите, директива - це лише функція, яка виконується, коли кутовий компілятор стикається з нею у DOM.
• Директива - це поведінка або перетворення DOM, яке викликається наявністю в коментарі атрибута, імені елемента, імені класу чи імені. Директива - це поведінка, яку слід викликати, коли в процесі компіляції (HTML) зустрічаються конкретні конструкції HTML. Директиви можуть бути розміщені в назвах елементів, атрибутах, назвах класів, а також у коментарях.
  • Більшість директив обмежуються лише атрибуцією. Наприклад, DoubleClick використовує лише власні директиви атрибутів.
• див. також Що таке директива angularjs?

Визначте та згрупуйте кутові речі (речовини для ін'єкцій залежностей) у модулях.
Обмінюйтесь даними та переглядайте взаємодію веб-серверів у службах.
Розширюйте HTML і робіть маніпуляції з DOM у директивах.
І зробити контролери максимально тонкими.