Co to jest dyrektywa AngularJS?


181

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:

Na stronie głównej :

Dyrektywy są unikalną i potężną funkcją dostępną w AngularJS. Dyrektywy pozwalają ci wymyślić nową składnię HTML, specyficzną dla twojej aplikacji.

W dokumentacji programisty :

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:

  1. Co to jest (zobacz jasną definicję jQuery jako przykład)
  2. Jakie praktyczne problemy i sytuacje ma rozwiązać
  3. Jaki wzór projektowy ucieleśnia, lub alternatywnie, jak pasuje do rzekomej misji AngularJS MVC / MVW .

2
Miałeś mnie w ... patrz jasna definicja jQuery jako przykład.
joshuamabina

Nie jestem pewien, jak było w 2012 r. W przypadku przepełnienia stosu, ale po prostu poprawiłem to pytanie i dodałem tag „dyrektywa kątowa”. Jego informacji tag faktycznie daje dość jasną definicję. Zauważyłem też, że nie mogę znaleźć drugiego cytatu w dokumentacji dla programistów…
user4642212,

Odpowiedzi:


142

Co to jest (zobacz jasną definicję jQuery jako przykład)?

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.

Jakie praktyczne problemy i sytuacje ma rozwiązać?

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.

Jaki wzór projektowy zawiera lub alternatywnie, w jaki sposób pasuje do rzekomej misji angularjs MVC / MVW

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

  • zdefiniuj pęczek HTML (tj. szablon), aby zastąpić dyrektywę
  • powiązać zdarzenia z tym elementem (lub jego elementami potomnymi)
  • dodaj / usuń klasę
  • zmień wartość text ()
  • obserwuj zmiany atrybutów zdefiniowanych w tym samym elemencie (w rzeczywistości oglądane są wartości atrybutów - są to właściwości zakresu, stąd dyrektywa obserwuje „model” zmian)
  • itp.


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.


2
Mark, dzięki. Myślę, że jest to jasne i prawdopodobnie najbliższe dokładnej odpowiedzi. Myślę, że dyrektywy są zawsze powiązane z tagami HTML, prawda? Być może dokładniej jest powiedzieć, że dyrektywa jest funkcją powiązaną ze znacznikiem HTML. Jako taki umożliwia deklaratywne rozszerzenie języka HTML.
toster,

Cóż, w komentarzu można zastosować dyrektywę, więc nie wszystkie dyrektywy muszą być powiązane z tagiem HTML. Np.<!-- directive: my-directive exp -->
Mark Rajcok,

Mark, czy byłoby to niekonwencjonalne zastosowanie dyrektywy? tzn. dyrektywy są konwencjonalnie stosowane i przeznaczone do rozszerzania HTML.
tohster,

9
OK, teraz lepiej rozumiem. Jednym ze sposobów myślenia o tym jest: 1. DSL zwykle reprezentują drzewa składniowe 2. HTML DOM jest drzewem składni DSL, ale jest sztywne: znaczniki są w większości sztywno zaprojektowane i przeznaczone, a nie rozszerzalne. 3. AngularJS i mechanizm dyrektywy w szczególności zwiększają elastyczność HTML DOM, umożliwiając programistom tworzenie niestandardowych węzłów drzewa. Węzły te mogą reprezentować nowe zachowania lub agregacje istniejących zachowań (poddrzewa) 4. Zatem dyrektywy pozwalają HTML DOM ewoluować w niestandardowy DSL
tosterster

1
@MarkRajcok Walczę z twoim ostatnim akapitem. Czy zwykły <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>)
Royi Namir,

11

Być może byłaby to naprawdę prosta i początkowa definicja dyrektyw kątowych

Dyrektywy AngularJS (dyrektywy ng) to atrybuty HTML z przedrostkiem ng (model ng, aplikacja ng, powtórzenie ng, wiązanie ng) używane przez Angular do rozszerzenia HTML. ( z: samouczek kątowy W3schools )

Oto niektóre przykłady tego

Aplikacja ng definiuje aplikację AngularJS.

Model ng wiąże wartości kontrolek HTML (input, select, textarea) z danymi aplikacji.

Dyrektywa ng-bind wiąże dane aplikacji z widokiem HTML.

<div ng-app="">
    <p>Name: <input type="text" ng-model="name"></p>
    <p ng-bind="name"></p>
</div>

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.


4

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.


Dodałem, że moim zdaniem jest to nieco mniej techniczne wytłumaczenie.
raam86

1
Dzięki, to jest bardzo pomocne. Może więc mogę myśleć o tym jako o rodzaju szablonu dynamicznego (podobnego do klasy w programowaniu OO), który zamyka komponent, opisuje go właściwościami i zachowaniami, może być tworzony w postaci instancji i może wyrażać się w DOM? A powodem, dla którego istnieje (vs. obiekt javascript lub szablon HTML) jest umożliwienie znacznikom HTML przyjmowania bardziej dynamicznych, obiektowych zachowań, aby mogły zacząć manipulować w programowaniu OO?
toster

Tak i nie. Nie powiedziałbym, że powód istnienia dyrektyw ma wiele wspólnego z tym, że można nimi manipulować w programowaniu OO. W rzeczywistości całe angularjs podejście do frameworka jest silnie powiązane z HTML i dowolnymi atrybutami węzłów DOM, a nie z pisaniem kodu OO Javascript. Odczuwam ten klimat, patrząc na wszystkie przykłady tego, jak angularjs rozwiązuje codzienne problemy. Powiedziałbym, że głównym powodem dyrektyw jest sposób osadzenia zachowań i danych w jednym semantycznie ustrukturyzowanym komponencie.
WTK,

3

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.


2

Strona główna jest bardzo jasna: po najechaniu myszką na zakładki w ostatniej sekcji:

Rozszerzyliśmy słownictwo HTML o niestandardowy tabs element. tabsAbstracts złożoną strukturę HTML i zachowanie niezbędnych do odtwarzania z zakładkami. Rezultatem jest bardziej czytelny widok i bardzo łatwa do ponownego wykorzystania składnia. ”

Następnie w następnej zakładce:

angular.module('components', []).
  directive('tabs', function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: {},
      controller: function($scope, $element) {
        var panes = $scope.panes = [];

        $scope.select = function(pane) {
          angular.forEach(panes, function(pane) {
            pane.selected = false;
          });
          pane.selected = true;
        }

Możesz więc wymyślić elementy HTML, tabsa więc pozwolić kątowej obsługiwać renderowanie tych elementów.


2
Dziękuję za szybką odpowiedź! Czy zatem celem dyrektywy jest rozszerzenie słownictwa HTML poprzez tworzenie niestandardowych tagów i atrybutów? Wydaje się to dość potężne, chociaż wydaje się, że rozwiązuje znacznie szerszy zakres problemu niż „MVW”. BTW inni mogą się nie zgodzić, ale sądzę, że przewijanie do dołu strony, a następnie najechanie myszą na hiperlinkowane słowo, a następnie przeczytanie wyskakującego podpowiedzi, która nie wspomina ani słowa „dyrektywa”, nie jest dokładnie „ bardzo jasna „definicja dyrektywy”. Niemniej jednak bardzo doceniam szybką odpowiedź.
toster

Tak! Możesz sprawdzić to skrzypce, które zrobili. Rzeczywisty HTML jest inny niż w okienku HTML.
raam86
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.