Dyrektywy wbudowane

Dyrektywy to dodatkowe atrybuty rozszerzające możliwości języka HTML. AngularJS dostarcza wiele wbudowanych dyrektyw, a do tego pozwala na tworzenie własnych. W tym rozdziale zajmiemy się dyrektywami, które otrzymujemy razem z frameworkiem.

Lista popularnych dyrektyw

Przedstawimy teraz kilkanaście najbardziej popularnych dyrektyw wraz z ich krótkimi opisami. Pełna lista dyrektyw jest znacznie dłuższa, dlatego warto się również zapoznać z linkiem na końcu rozdziału, który prowadzi do oryginalnej dokumentacji związanej z tym tematem.

ng-app

Dyrektywa oznaczająca miejsce, w którym następuje inicjalizacja aplikacji AngularJS. Zwykle stosujemy go w ramach taga html albo body. W przypadku wystąpienia kilku atrybutów o tej nazwie na jednej stronie, tylko pierwszy z nich będzie brany pod uwagę.
```
<html ng-app="Appa">
```
ng-init

Dyrektywa inicjalizująca konkretną wartość zmiennej w modelu. Nie powinna być nadużywana. Zaleca się inicjowanie danych bezpośrednio w kontrolerach.
```
<div ng-init="lastName='Kowalski'"></div>
```
ng-model i ng-class

Dyrektywa ng-model wiąże wartości z tagów HTML z konkretną zmienną w AngularJS. Możemy w ten sposób np. przechowywać wartości wybrane, bądź wpisane przez użytkownika na formularzach. Wiązanie odbywa się w dwóch kierunkach. Możemy zmienić tekst w polu tekstowym, co zmieni wartość w modelu, jak również możemy z poziomu kodu Angulara zmienić wartość w modelu co wpłynie na pokazanie zmienionej wartości w polu tekstowym.
```
<input type="name" ng-model="appa.name">
```
Poprzez zastosowanie modelu możliwe jest proste zaimplementowanie walidacji wprowadzanych wartości oraz ustawienie odpowiedniej klasy css w przypadku zaistnienia określonego warunku:
```
<form name="appaForm">
    <div
        ng-class="{'has-error' : submitted && appaForm.appaName.$invalid}">
        <input type="text" name="appaName" ng-model="appa.name">
        <p>Twoja nazwa: {{ appa.name }} </p>
    </div>
</form>
```
Używając powyższego kodu zauważymy, jak działa wiązanie dwukierunkowe. Jeśli zaczniemy pisać tekst w polu input, to na bieżąco będzie się zmieniała wartość w powiązanym modelu, co spowoduje że automatycznie zobaczymy ją w miejscu wyrażenia reprezentowanego przez nawiasy klamrowe.
ng-controller

Dyrektywa wskazująca, który kontroler AngularJS obsługuje dany fragment kodu HTML. Kontroler podany dla body dotyczy całego widoku aplikacji:
```
<body ng-controller="AppCtrl">
```
Kontrolery są tym mechanizmem, który wspiera AngularJS w kontekście realizacji założeń wzorca MVC. Widok (V) tworzony za pomocą szablonów HTML jest wiązany z modelem (M), do którego dane są dostarczane przez kontroler (C), odpowiedzialny za wstępne przetwarzanie danych dostępnych w widoku.
ng-cloak

Dodanie tej dyrektywy powoduje, że dziewicza forma Angulara (przez kompilacją) jest niewidoczna dla użytkownika. Zwykle umieszczamy ją w tagu body - wtedy obejmuje cały widok strony:
```
<body ng-controller="AppCtrl" ng-cloak>   
```
Oprócz dyrektywy należy również dodać do pliku ze stylami poniższą definicję css:
```
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak,
    .x-ng-cloak {
    display: none !important;
}   
```

ng-repeat

Powtarza HTML element w miejscu użycia. Możemy tak np. zbudować listę wierszy itemów z listy, gdzie każdy wiersz będzie miał równe kolumny (wyznaczone za pomocą klasy Bootstrapa col-md-*):

                        
<div class="col-md-12" ng-repeat="appaItem in appaItems">
    <div class="col-md-1">...</div>
    <div class="col-md-5">...</div>
    <div class="col-md-2">...</div>
    <div class="col-md-3">...</div>
    <div class="col-md-1">...</div>
</div>

ng-href i ng-src

W AngularJS zamiast używać klasycznych atrybutów href i src powinniśmy korzystać z ich angularowych odpowiedników. Wtedy angularowe wyrażenia typu {{hash}} będą działać z regularnymi nazwami atrybutów.
```
<img ng-src="appagridserver/assets/cross_close.png"/>  
```
ng-if i ng-show

Zasadniczo te dwie dyrektywy pokazują lub ukrywają zawartość HTML w zależności od flagi ustawionej na true/false. Różnica miedzy nimi polega na tym, że ng-show faktycznie ukrywa elementy pozostawiając je w kodzie źrodłowym, natomiast ng-if w ogóle nie dodaje ich do drzewa komponentów na stronie:
```
<div ng-show="!loaderEnabled">
...
</div>
```
```
<div ng-if="!loaderEnabled">
...
</div>
```
ng-click i inne dyrektywy oparte o model zdarzeń JS:

Dyrektywa jest analogiczna do akcji on-click z regularnego Javascriptu, ale umożliwia użycie angularowych wyrażeń (expressions) w ramach dyrektywy. Można w niej również uruchomić funkcję zdefiniowaną w ramach scope'u:
```
<button
    class="..."
    ng-click="clearAppaCategories()">
    ...   
</button>
```
Podobnie wyglądają inne dyrektywy operujące na zdarzeniach Javascript: ng-submit, ng-focus, ng-keyup, ng-keydown, ng-mousenter itp. W dokumentacji AngularJS - załączonej na dole strony w sekcji linków - możecie w łatwy sposób trafić do pełnej listy tych dyrektyw.
ng-required i inne dyrektywy wspomagające walidację:

Dyrektywa ustawia wymagalność uzupełnienia danej zmiennej w modelu AngularJS (odpowiadającej za konkretny element formularza). Umożliwia użycie angularowych wyrażeń. W poniższym przykładzie dyrektywa używa funkcji anySelected do określenia czy przynajmniej jeden z checkbox-ów został zaznaczony (implementacja funkcji dostępna jest w naszym kursie web):
```
<input type="checkbox" ...  ng-required="anySelected()">
```
Analogicznie wyglądają inne dyrektywy z tej kategorii: ng-disabled, ng-minlength, ng-maxlength itp. Podobnie jak w poprzednim punkcie, tutaj również zapraszamy do oryginalnej dokumentacji.

Rekomendacja

AngularJS ma naprawdę bardzo bogaty zestaw wbudowanych dyrektyw. Mimo, że teoretycznie moglibyśmy czasem zastosować ich regularne HTML-owe odpowiedniki, to sugerujemy trzymać się dyrektyw, gdyż mieszanie tych rozwiązań wymiennie doprowadzi do nieprzewidywalnych skutków ubocznych. Takowe mogą wystąpić zawsze, gdy używamy funkcjonalności niezwiązanych bezpośrednio z cyklem życia aplikacji AngularJS. W niektórych sytuacjach doprowadzi to nawet do całkowitej destrukcji już na etapie kompilacji.

Używamy w StartAPPa

Wiele z powyższych przykładów pochodzi z naszych kursów. W szczególności kurs Formularz Zaawansowany to prawdziwe królestwo zarówno dyrektyw walidujących, jak i tych operujących na zdarzeniach Javascript. Jest to spowodowane tym, że w ramach budowy formularza zaimplementowaliśmy wiele różnorodnych komponentów HTML, które wymagają odpowiedniej obsługi (w tym również walidacji). Natomiast kilka prostych walidacji, jak również podstawowa obsługa zdarzeń jest także dostępna w ramach kursu Formularz Podstawowy.

Linki:

https://docs.angularjs.org/api/ng/directive

Zapisz się do newslettera :

Stale się rozwijamy, a więc bądź na bieżąco!
Na ten adres będziemy przesyłać informacje o ważniejszych aktualizacjach, a także o nowych materiałach pojawiających się na stronie.

Polub nas na Facebooku:

Nasi partnerzy:

stackshare

Javappa to również profesjonalne usługi programistyczne oparte o technologie JAVA. Jeśli chesz nawiązać z nami kontakt w celu uzyskania doradztwa bądź stworzenia aplikacji webowej powinieneś poznać nasze doświadczenia.
Kliknij O nas .

Starter Jak to działa Aplikacja

Obserwuj nas Polityka Cookies Regulamin Licencja Ochrona prywatności

Pozycjonowanie stron: Grupa TENSE