Co to jest dyrektywa AngularJS?
Dyrektywa w AngularJS to polecenie, które daje HTMLowi nową funkcjonalność. Kiedy angular przejdzie przez kod HTML, najpierw znajdzie dyrektywy na stronie, a następnie odpowiednio przeanalizuje stronę HTML.
Prostym przykładem dyrektywy AngularJS, którą widzieliśmy we wcześniejszych rozdziałach, jest „dyrektywa ng-model”. Ta dyrektywa służy do wiązania naszego modelu danych z naszym widokiem.
Uwaga: Możesz mieć podstawowy kod kątowy na stronie HTML z dyrektywami ng-init, ng-repeat i ng-model bez konieczności posiadania kontrolerów. Logika tych dyrektyw znajduje się w pliku Angular.js dostarczonym przez Google. Kontrolery to kątowe konstrukcje programowania następnego poziomu, które umożliwiają logikę biznesową, ale jak wspomniano, aby aplikacja była aplikacją kątową, posiadanie kontrolera nie jest obowiązkowe.
W tym samouczku nauczysz się:
- Jak stworzyć dyrektywę
- ng-app
- ng-init
- ng-model
- ng-repeat
Jak stworzyć dyrektywę
Jak zdefiniowaliśmy we wstępie, dyrektywy AngularJS to sposób na rozszerzenie funkcjonalności HTML.
Istnieją 4 dyrektywy zdefiniowane w AngularJS.
Poniżej znajduje się lista dyrektyw AngularJS wraz z przykładami, które wyjaśniają każdą z nich.
1) ng-app
Służy do inicjalizacji aplikacji Angular.JS. Gdy ta dyrektywa jest umieszczona na stronie HTML, w zasadzie mówi Angularowi, że ta strona HTML jest aplikacją angular.js.
Poniższy przykład pokazuje, jak używać dyrektywy ng-app. W tym przykładzie po prostu pokażemy, jak zrobić ze zwykłej aplikacji HTML aplikację angularJS.
Event Registration Guru99 Global Event
Tutorial Name : {{ "Angular" + "JS"}}
Objaśnienie kodu:
- Dyrektywa „ng-app” została dodana do naszego znacznika DIV, aby wskazać, że ta aplikacja jest aplikacją angular.js. Zauważ, że dyrektywę ng-app można zastosować do dowolnego tagu, więc można ją również umieścić w tagu body.
- Ponieważ zdefiniowaliśmy tę aplikację jako aplikację angular.js, możemy teraz korzystać z funkcjonalności angular.js. W naszym przypadku używamy wyrażeń, aby po prostu połączyć 2 ciągi.
Jeśli kod zostanie wykonany pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.
Wynik:
Dane wyjściowe wyraźnie pokazują dane wyjściowe wyrażenia, które było możliwe tylko dlatego, że zdefiniowaliśmy aplikację jako aplikację angularjs.
2) ng-init
Służy do inicjalizacji danych aplikacji. Czasami możesz potrzebować pewnych danych lokalnych dla swojej aplikacji, można to zrobić za pomocą dyrektywy ng-init.
Poniższy przykład pokazuje, jak używać dyrektywy ng-init.
W tym przykładzie utworzymy zmienną o nazwie „TutorialName” za pomocą dyrektywy ng-init i wyświetlimy wartość tej zmiennej na stronie.
Event Registration Guru99 Global Event
Tutorial Name : {{ TutorialName}}
Objaśnienie kodu:
- Dyrektywa ng-init jest dodawana do naszego znacznika div w celu zdefiniowania zmiennej lokalnej o nazwie „TutorialName”, a nadana jej wartość to „AngularJS”.
- Używamy wyrażeń w AngularJs do wyświetlania wyniku zmiennej o nazwie „TutorialName”, która została zdefiniowana w naszej dyrektywie ng-init.
Jeśli kod zostanie wykonany pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.
Wynik:
Na wyjściu
- Wynik wyraźnie pokazuje wynik wyrażenia, które zawiera ciąg „AngularJS”. Dzieje się tak w wyniku przypisania ciągu „AngularJS” do zmiennej „TutorialName” w sekcji ng-init.
3) model ng
I wreszcie mamy dyrektywę ng-model, która służy do wiązania wartości kontrolki HTML z danymi aplikacji. Poniższy przykład pokazuje, jak używać dyrektywy ng-model.
W tym przykładzie
- Stworzymy 2 zmienne o nazwie „ilość” i „cena”. Te zmienne będą powiązane z 2 kontrolkami wprowadzania tekstu.
- Następnie wyświetlimy całkowitą kwotę w oparciu o pomnożenie wartości ceny i ilości.
Event Registration Guru99 Global Event
People : Registration Price : Total : {{quantity * price}}
Objaśnienie kodu:
- Dyrektywa ng-init została dodana do naszego znacznika div w celu zdefiniowania 2 zmiennych lokalnych; jeden nazywa się „ilością”, a drugi „ceną”.
- Teraz używamy dyrektywy ng-model, aby powiązać pola tekstowe „Ludzie” i „Cena rejestracji” odpowiednio z naszymi zmiennymi lokalnymi „ilość” i „cena”.
- Na koniec pokazujemy Suma za pomocą wyrażenia, które jest pomnożeniem zmiennych ilościowych i cenowych.
Jeśli kod zostanie wykonany pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.
Wynik:
- Dane wyjściowe wyraźnie pokazują zwielokrotnienie wartości dla osób i ceny rejestracyjnej.
Teraz, jeśli przejdziesz do pól tekstowych i zmienisz wartość ceny osób i rejestracji, suma zmieni się automatycznie.
- Powyższe dane wyjściowe pokazują tylko moc wiązania danych w angularJs, która jest osiągana za pomocą dyrektywy ng-model.
4) ng-powtórzyć
Służy do powtarzania elementu HTML. Poniższy przykład pokazuje, jak używać dyrektywy ng-repeat.
W tym przykładzie
- Będziemy mieć tablicę nazw rozdziałów w zmiennej tablicowej i
- następnie użyj dyrektywy ng-repeat, aby wyświetlić każdy element tablicy jako element listy
Event Registration Guru99 Global Event
- {{names}}
Objaśnienie kodu:
- Dyrektywa ng-init została dodana do naszego znacznika div w celu zdefiniowania zmiennej o nazwie „chapters”, która jest zmienną tablicową zawierającą 3 ciągi.
- Element ng-repeat jest używany przez zadeklarowanie zmiennej wbudowanej o nazwie „names” i przejrzenie każdego elementu w tablicy chapters.
- Na koniec pokazujemy wartość lokalnych zmiennych wbudowanych „names”.
Jeśli kod zostanie wykonany pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.
Wynik:
- Powyższe dane wyjściowe pokazują tylko, że dyrektywa ng-repeat pobrała każdą wartość z tablicy o nazwie „chapters” i utworzyła elementy listy HTML dla każdego elementu w tablicy.
Podsumowanie
- Dyrektywy służą do rozszerzania funkcjonalności HTML. Angular udostępnia wbudowane dyrektywy, takie jak
- ng-app - służy do inicjalizacji aplikacji kątowej.
- ng-init - służy do tworzenia zmiennych aplikacji
- ng-model - służy do wiązania formantów HTML z danymi aplikacji
- ng-repeat - Służy do powtarzania elementów za pomocą angular.