To co wyróżnia AngularJS, to własny kompilator HTML. Pozwala on nam dodać nowe funkcjonalności do naszego HTML, nauczyć go nowych zachowań. W jaki sposób? Za pomocą dyrektyw. W tym artykule przedstawię proces przetwarzania dyrektyw w Angularze, omówię podstawowe własności funkcji compile, pre-link, post-link. Jeśli znajdziecie w nim jakiekolwiek błędy – proszę, dajcie znać o tym w komentarzach. Zarówno dla innych czytelników, jak i dla mnie, ponieważ dopiero zaczynam przygodę z AngularJS.
COMPILE vs. LINK
Wracając do głównego tematu – renderowanie strony przez przeglądarkę polega na czytaniu składni HTML, stworzeniu DOM oraz wysłaniu sygnału, kiedy ten DOM jest już gotowy. W aplikacjach opartych na AngularJS, kompilowanie dyrektyw można bardzo ogólnie podzielić na dwa etapy:
- kompilacja (compile):
- analizowanie DOM w poszukiwaniu dyrektyw zdefiniowanych w aplikacji, zaczynając od elementu z atrybutem ng-app,
- jeśli ta sama dyrektywa występuje w kilku węzłach DOM, kompilacja wykonuje się osobno dla każdego węzła,
- w tej fazie dyrektywa ma szansę zmodyfikować węzeł DOM jeszcze przed podpięciem do niego zakresu ($scope)
- linkowanie (link):
- podpięcie predefiniowanych funkcjonalności do wyszukanych dyrektyw (bindowanie logiki),
- linkowane funkcjonalności mają zastosowanie na poziomie elementu, dla którego zdefiniowaliśmy dyrektywę oraz wszystkich jego dzieci,
- to również dołączenie event listeners i $scope osobno dla każdego węzła, gdzie występują dyrektywy,
- ten etap możemy podzielić na prelinkowanie (faza pre-link) oraz post-linkowanie (faza post-link).
Uwaga: Faza kompilacji zwraca funkcję link, czytaj: faza linkowania zawsze następuje po fazie kompilacji.
PRE-LINK vs. POST-LINK + kontroler
Funkcje pre-link i post-link mają dokładnie te same funkcje, różnica pomiędzy nimi polega tylko na kolejności wykonywania.
Etap pre-link występuje pierwszy, od korzeni w stronę dzieci, najgłębiej zagnieżdżonych węzłów, jednocześnie od węzłów z najwyższym priorytetem do tych z najniższym priorytetem.
Co istotne – wywołany przed linkowaniem dzieci.
Etap post-link występuje po linkowaniu dzieci, w odwrotnej kolejności niż pre-link.
W tym miejscu warto zwrócić uwagę na czas, w którym jest wywoływany kontroler. Otóż kontrolery są wywoływane przed fazą linkowania.
Przykład, który obrazuje wpływ zagnieżdżenia i priorytetyzacji na kolejność wywołania poszczególnych funkcji:
Kolejność wywoływania kontrolera, pre-link i post-link można na podstawie przykładu zobrazować w ten sposób:
CZYTAJ DALEJ…
Na koniec bardzo polecam lekturę tego krótkiego artykułu: LINK Poszerza on temat kompilacji dyrektyw o świetny przykład praktycznego zastosowania wiedzy o poszczególnych jej etapach. Artykuł nie jest długi, autor próbując rozwiązać konkretny problem, płynnie przechodzi po kolei po wszystkich funkcjach, krótko je omawiając. Polecam też LINK – tu znajdziemy głębszą, czysto teoretyczną analizę omawianych funkcji oraz LINK – sposoby wywołania funkcji compile oraz link.
