AngularJS: Kompilacja dyrektyw – funkcje compile, pre-link, post-link.

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:

  1. 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)
  2. 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).
pre-link post-link compile angularJS
Proces kompilacji dyrektyw w AngularJS.

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:

kompilacja dyrektyw kontroler compile pre-link post-link kolejność wywołań
Kolejność wywoływania kontrolera, compile, pre-link, post-link w AngularJS.

 

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.

Źródła, oprócz linków podanych powyżej to LINKLINKLINK.

Artykuły, które mogą Ci się spodobać...

Wpisz hasło, którego szukasz i naciśnij ENTER, aby je wyszukać. Naciśnij ESC, aby anulować.

Dawaj na górę