Jaka jest różnica między usługą, dyrektywą i modułem?

Czytałem dużo dokumentów i jestem coraz bardziej zdezorientowany. W zasadzie nie mogę zrozumieć różnicy między a

• usługa
• dyrektywa
• moduł

Widzę wiele niestandardowych komponentów. Czasami używają dyrektyw, czasami usług. Zawsze zaczyna się od modułu. Czy ktoś może wyjaśnić na przykładzie, jaka jest różnica między tymi trzema typami?

Pomyśl o module jako o miejscu, w którym można połączyć szereg innych rzeczy, takich jak dyrektywy, usługi, stałe itp. Moduły można wstrzykiwać do innych modułów, co zapewnia wysoki poziom ponownego wykorzystania.

Pisząc aplikację kątową, miałbyś moduł najwyższego poziomu, który jest kodem aplikacji (bez szablonów).

Usługi są głównie sposobem komunikacji między kontrolerami, ale można wprowadzić jedną usługę do drugiej. Usługi są często używane jako sposób na dotarcie do magazynów danych, a ludzie będą opakowywać kątowe interfejsy API, takie jak ngResource. Ta technika jest przydatna, ponieważ sprawia, że ​​testowanie (zwłaszcza kpienie) jest dość łatwe. Możesz mieć usługi do wykonywania innych czynności, takich jak uwierzytelnianie, logowanie itp.

Dyrektywy są używane do tworzenia widżetów lub pakowania istniejących rzeczy, takich jak wtyczki jquery. Zawijanie istniejących wtyczek może być wyzwaniem, a powodem, dla którego warto to zrobić, jest ustanowienie dwukierunkowego powiązania danych między wtyczkami a angularem. Jeśli nie potrzebujesz dwukierunkowego wiązania danych, nie musisz ich zawijać.

Dyrektywa jest także miejscem do manipulacji DOM, przechwytywania zdarzeń DOM, itp. Nie powinieneś robić rzeczy związanych z DOM w kontrolerach lub usługach. Tworzenie dyrektyw może być dość skomplikowane. IMHO, polecam najpierw przyjrzeć się API w poszukiwaniu czegoś, co może zrobić to, czego szukasz LUB poprosić o radę Grupę Google Angular.

Z moich osobistych notatek (głównie fragmenty dokumentów, posty w grupach Google i posty SO):

Moduły

• zapewniają sposób na usługi przestrzeni nazw / grup, dyrektywy, filtry, informacje o konfiguracji i kod inicjujący
• pomagają unikać zmiennych globalnych
• są używane do konfigurowania $ injector, pozwalając rzeczy zdefiniowane przez moduł (lub cały moduł) być wstrzyknięte gdzie indziej (rzeczy Dependency Injection)
• Moduły Angular nie są powiązane z CommonJS ani Require.js. W przeciwieństwie do modułów AMD lub Require.js, moduły Angular nie próbują rozwiązać problemu z kolejnością ładowania skryptów lub leniwym pobieraniem skryptów. Cele te są ortogonalne i oba systemy modułowe mogą funkcjonować obok siebie i realizować swoje cele (tak twierdzą doktorzy).

Usługi

• są singletonami, więc istnieje tylko jedno wystąpienie każdej zdefiniowanej usługi. Jako pojedyncze, nie mają na nie wpływu zakresy, a zatem można uzyskać do nich dostęp (współdzielony) z wieloma widokami / kontrolerami / dyrektywami / innymi usługami
• Możesz (i prawdopodobnie powinieneś) tworzyć usługi niestandardowe, kiedy
  • co najmniej dwie rzeczy wymagają dostępu do tych samych danych (nie używaj zakresu głównego) lub po prostu chcesz starannie hermetyzować dane
  • chcesz hermetyzować interakcje z, powiedzmy, serwerem WWW (rozszerz $ resource lub $ http w swojej usłudze)
• Wbudowane usługi zaczynają się od „$”.
• Aby skorzystać z usługi, wymagane jest wstrzyknięcie zależności od elementu zależnego (np. Od kontrolera, innej usługi lub dyrektywy).

Dyrektywy (niektóre z poniższych pozycji mówią zasadniczo to samo, ale stwierdziłem, że czasami nieco inne sformułowanie bardzo pomaga)

• są odpowiedzialne za aktualizację modelu DOM, gdy stan modelu się zmieni
• poszerz słownictwo HTML = naucz HTML nowych sztuczek.
  Angular ma wbudowany zestaw dyrektyw (np. Ng- * stuff), które są przydatne do tworzenia aplikacji internetowych, ale możesz dodać własne, tak aby HTML mógł zostać przekształcony w deklaratywny język specyficzny dla domeny (DSL). Np. Elementy <tabs> i <pane> na demo strony głównej Angulara „Tworzenie komponentów”.
  • Nieoczywiste dyrektywy wbudowane (ponieważ nie zaczynają się od „ng”): a, form, input, script, select, textarea. W Angular to wszystko robi więcej niż normalnie!
• Dyrektywy pozwalają na „komponowanie kodu HTML”. Dyrektywy są często lepsze niż ng-include. Na przykład, kiedy zaczynasz pisać dużo HTML z głównie wiązaniem danych, refaktoryzuj ten HTML na dyrektywy (wielokrotnego użytku).
• Kompilator Angular umożliwia dołączanie zachowania do dowolnego elementu lub atrybutu HTML, a nawet tworzenie nowych elementów lub atrybutów HTML z niestandardowym zachowaniem. Angular wywołuje te dyrektywy rozszerzeń zachowania .
  • Kiedy wszystko ugotujesz, dyrektywa jest po prostu funkcją, która jest wykonywana, gdy kompilator Angular napotka ją w DOM.
• Dyrektywa to zachowanie lub transformacja DOM, która jest wyzwalana przez obecność atrybutu, nazwy elementu, nazwy klasy lub nazwy w komentarzu. Dyrektywa to zachowanie, które powinno być wyzwalane, gdy w procesie kompilacji (HTML) zostaną napotkane określone konstrukcje HTML. Dyrektywy można umieszczać w nazwach elementów, atrybutach, nazwach klas, a także komentarzach.
  • Większość dyrektyw ogranicza się tylko do atrybutów. Na przykład DoubleClick używa tylko dyrektyw atrybutów niestandardowych.
• zobacz także Co to jest dyrektywa angularjs?

Zdefiniuj i zgrupuj rzeczy Angular (rzeczy iniekcji zależności) w modułach.
Udostępniaj dane i pakuj interakcje z serwerem WWW w usługi.
Rozszerz HTML i wykonuj manipulacje DOM w dyrektywach.
I spraw, aby kontrolery były tak „cienkie”, jak to tylko możliwe.