Spędziłem sporo czasu czytając dokumentację AngularJS i kilka samouczków, i byłem bardzo zaskoczony, jak niedostępna jest ta dokumentacja.
Mam proste, odpowiedzialne pytanie, które może być również przydatne dla innych osób, które chcą wziąć AngularJS:
Co to jest dyrektywa AngularJS?
Powinna być gdzieś prosta, precyzyjna definicja dyrektywy, ale strona internetowa AngularJS oferuje te zaskakująco bezużyteczne definicje:
Dyrektywy są unikalną i potężną funkcją dostępną w AngularJS. Dyrektywy pozwalają ci wymyślić nową składnię HTML, specyficzną dla twojej aplikacji.
Dyrektywy są sposobem na nauczenie HTML nowych sztuczek. Podczas kompilacji DOM dyrektywy są dopasowywane do HTML i wykonywane. Pozwala to dyrektywom rejestrować zachowanie lub przekształcać DOM.
I jest seria rozmów na temat dyrektyw, które, jak na ironię, wydają się zakładać, że publiczność już rozumie, czym one są.
Czy ktokolwiek byłby w stanie przedstawić, dla jasnego odniesienia, dokładną definicję tego, co to jest dyrektywa, która wyjaśnia:
- Co to jest (zobacz jasną definicję jQuery jako przykład)
- Jakie praktyczne problemy i sytuacje ma rozwiązać
- Jaki wzór projektowy ucieleśnia, lub alternatywnie, jak pasuje do rzekomej misji AngularJS MVC / MVW .
Odpowiedzi:
Dyrektywa jest zasadniczo funkcją †, która jest wykonywana, gdy kompilator Angular znajdzie ją w DOM. Funkcja (funkcje) może zrobić prawie wszystko, dlatego myślę, że raczej trudno jest zdefiniować, czym jest dyrektywa. Każda dyrektywa ma nazwę (jak ng-repeat, tabs, make-up-your-own) i każda dyrektywa określa, gdzie można jej użyć: element, atrybut, klasa, w komentarzu.
† Dyrektywa zwykle ma tylko funkcję (post) link. Skomplikowana dyrektywa może mieć funkcję kompilacji, funkcję pre-link i funkcję post-link.
Najpotężniejszą rzeczą, jaką mogą zrobić dyrektywy, jest rozszerzenie HTML. Twoje rozszerzenia to język specyficzny dla domeny (DSL) do tworzenia aplikacji. Na przykład, jeśli Twoja aplikacja prowadzi witrynę zakupów online, możesz rozszerzyć HTML, aby zawierał dyrektywy „koszyk zakupów”, „kupon”, „promocje” itp. - dowolne słowa, obiekty lub pojęcia są bardziej naturalne w obrębie „ zakupy online ”zamiast„ div ”i„ span ”(jak już wspomniano @WTK).
Dyrektywy mogą również komponować HTML - zgrupuj garść HTML w jakiś komponent wielokrotnego użytku. Jeśli używasz ng-include do pobierania dużej ilości HTML, prawdopodobnie nadszedł czas na przeformułowanie dyrektyw.
Dyrektywy służą do manipulowania DOM i przechwytywania zdarzeń DOM. Właśnie dlatego funkcje kompilacji i dowiązania dyrektywy otrzymują argument „element”. Możesz
W HTML mamy takie rzeczy jak
<a href="...">
,<img src="...">
,<br>
,<table><tr><th>
. Jak opisałbyś, czym są a, href, img, src, br, table, tr i th? Taka właśnie jest dyrektywa.źródło
<!-- directive: my-directive exp -->
<div></div>
jest dyrektywą? Powiedziałeś tak. Ale tutaj nie ma dekoracji (poprzez element, klasę, komentarz, atrybut). Ludzie tutaj mówią, że są to znaczniki ponownego dla HTML DOM . Możesz wyjaśnić ? (Nie mówię o przyczynie, w której można stworzyć dyrektywę dla zwykłego elementu, takiego jak<div>
)Być może byłaby to naprawdę prosta i początkowa definicja dyrektyw kątowych
Oto niektóre przykłady tego
Sprawdź ten samouczek, przynajmniej dla mnie był to jeden z najlepszych wstępów do Angulara. Bardziej kompletnym podejściem byłoby wszystko, co wcześniej powiedział @ mark-rajcok.
źródło
Patrząc na dokumentację, dyrektywy są strukturami, które możesz napisać, że parsuje angularjs w celu stworzenia obiektów i zachowań. Innymi słowy, jest to szablon, w którym używasz kombinacji dowolnych dowolnych węzłów i pseudo-javascript oraz symboli zastępczych danych, aby wyrazić zamiary tego, jak Twój widget (komponent) jest skonstruowany, jak się zachowuje i jak jest zasilany danymi. Następnie Angularjs działa przeciwko tym dyrektywom, aby przetłumaczyć je na działający kod HTML / javascript.
Dostępne są dyrektywy, dzięki którym można budować bardziej złożone komponenty (widżety) przy użyciu odpowiedniej semantyki. Spójrz tylko na przykład angularjs dyrektyw - definiują one panel kart (co oczywiście nie jest poprawne w zwykłym HTML). Jest to bardziej intuicyjne niż używanie div-s lub span do tworzenia struktury, która jest następnie stylizowana tak, aby wyglądała jak panel tabulatorów.
źródło
W dyrektywach AngularJS znajdują się znaczniki HTML dla elementu DOM HTML, takiego jak atrybut (ograniczenie-A), nazwa elementu (ograniczenie-E), komentarz (ograniczenie-M) lub klasa CSS (ograniczenie-C), które informują kompilator HTML AngularJS ($ kompilować), aby wykonać określone zachowanie dla tego elementu DOM, a nawet przekształcić element DOM i jego dzieci. Niektóre przykłady to ng-bind, ng-hide / show itp.
źródło
Strona główna jest bardzo jasna: po najechaniu myszką na zakładki w ostatniej sekcji:
Następnie w następnej zakładce:
Możesz więc wymyślić elementy HTML,
tabs
a więc pozwolić kątowej obsługiwać renderowanie tych elementów.źródło