Kurs AngularJS #11 – Moduły

Moduły w Angularze to tak naprawdę pojemniki na wszystkie inne rzeczy – kontrolery, usługi, filtry, dyrektywy itd. Większość aplikacji ma określoną funkcje która tworzy swoją instancję i łączy inne części naszego projektu. Jednak aplikacje w Angularze nie mają takiej funkcji. Korzystają jednak z innego podejścia dzięki któremu w pełni wiadomo jak aplikacja powinna być załadowana tak, żeby skutecznie funkcjonowała. Jest kilka zalet takiego podejścia:

  • Proces deklaracji jest znacznie łatwiejszy do zrozumienia
  • Możemy korzystać z naszych projektów jak z niezależnych modułów
  • Moduły mogą być ładowane w dowolnej kolejności
  • Testy jednostkowe muszą załadować jedynie powiązane moduły co bardzo przyspiesza ich przebieg
  • Testy całościowe mogą używać modułów do nadpisania konfiguracji

Pisane przez nas do tej pory aplikacje były z reguły jedynie prostymi przykładami i nawet strona którą stworzyliśmy na początku w celu pokazania jak stworzyć swoją pierwszą aplikację w Angularze nie była niczym specjalnym. Przy większych projektach jednak powinniśmy rozbijać nasze aplikacje na moduły:

  • dla każdej funkcjonalności
  • dla każdego używanego ponownie kodu (zwłaszcza komponentów i filtrów)
  • oraz jeden główny moduł który będzie definiował zależności pozostałych i zawierał jakiś kod inicjujący wszystko inne

W dokumentacji Angulara możemy znaleźć przewodnik w którym szczegółowo opisane zostało jak powinniśmy tworzyć naszej aplikacje, jakich konwencji nazewniczych czy związanych z organizacją naszego projektu powinniśmy się trzymać tak żeby utrzymać całość w ładzie i zapewnić potencjał rozrostu aplikacji do bardzo dużych rozmiarów. Sam przewodnik jest po angielsku ale jak tylko ten kurs ukarze się w pełni na stronie zabiorę się za jego przetłumaczenie i podrzucę w podsumowaniu do tego wpisu i w osobnym artykule.

Ładowanie modułów i ich zależności

Moduł jest kolekcją bloków konfiguracyjnych i wykonawczych które stosowane są względem aplikacji podczas jej ładowania. W najprostszym przypadku moduł zawiera dwa rodzaje bloków:

  • Konfiguracyjne – są wykonywane podczas fazy rejestrowania zależności, ładowania i konfiguracji poszczególnych elementów.
  • Wykonawcze – wykonywane po załadowaniu wszystkiego co miało zostać załadowane. Znajduje się w nich kod który najczęściej służy do rozruchu naszej aplikacji i zrobienia kilku rzeczy które na początku trzeba zrobić.

Obydwa te rodzaje reprezentowane są odpowiednio przez config()run() z którym mieliśmy do czynienia we wcześniejszej części.

Bloki konfiguracyjne

Angular ma kilka wygodniejszych odpowiedników bloków konfiguracyjnych dla modułu. Postaram się to pokazać na przykładzie.

Prawda, że wygodniej? Mamy tutaj również jedną nową metodę o której wcześniej nie wspominaliśmy: value(). Jak widzisz deklaruje i definiuje ona jakąś wartość.

Bloki wykonawcze

Jest to najbliższe rozwiązanie w Angularze do jakiejś jednej, głównej funkcji w innych językach czy technologiach gdzie taka funkcje zarządzałaby wszystkimi innymi pomniejszymi funkcjonalnościami i przebiegiem naszej aplikacji. Jest to kod który wykonuje pewne rzeczy na początku, żeby później wszystko działało tak jak trzeba. Wykonywany jest kiedy cała konfiguracja dobiegnie końca i wszystkie elementy które tego wymagały zostaną załadowane. Kod ten przeważnie jest również trudny pod względem przeprowadzenia testów jednostkowych dlatego też powinien być umieszczony w oddzielnych modułach które zostaną zignorowane podczas testu.

Zależności

Moduły mogą mieć zapisane inne moduły jako zależności. Wszystkie moduły które zapisane są w zależnościach załadują się wcześniej niż moduł który ich wymaga. Oznacza to, że ich bloki konfiguracyjne i wykonawcze również zostaną wykonane wcześniej. Każdy moduł ponadto może być załadowany jedynie raz, niezależnie od tego ile innych modułów ma go zapisanego w zależnościach.

Tworzenie a uzyskiwanie dostępu

Pamiętaj również, że moduł tworzymy w ten sposób:

Podajemy więc nazwę i tablicę w której znajdują się ew. zależności jakich potrzebuje. Jeśli jednak chcemy jedynie odnieść się do modułu który już wcześniej stworzyliśmy pomijamy tę tablicę i piszemy po prostu:

Podsumowanie

Obszerny poradnik o tym jak tworzyć dobry jakościowo kod w ogólnie przyjętych konwencjach został już opublikowany i możesz go przeczytać tutaj.