Co to jest dyrektywa AngularJS?

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 .

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.

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.

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.

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.

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.