Dyrektywy AngularJS: ng-init, ng-app, ng-model i ng-repeat
Jamesa Hartmana
Co to jest dyrektywa w AngularJS?
A Dyrektywa w AngularJS jest poleceniem, które daje nową funkcjonalność HTML. Kiedy Angular przegląda 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 powią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 potrzeby posiadania kontrolerów. Logika tych dyrektyw znajduje się w pliku Angular.js dostarczanym przez Google. Kontrolery to konstrukcje programowania kątowego 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.
Jak tworzyć dyrektywy w AngularJS
Jak zdefiniowaliśmy we wstępie, dyrektywy AngularJS są sposobem na rozszerzenie funkcjonalności HTML.
Istnieją 4 dyrektywy zdefiniowane w angularjs.
Poniżej znajduje się lista dyrektyw AngularJS wraz z przykładami wyjaśniającymi każdą z nich.
ng-app w AngularJS
Służy do inicjowania aplikacji Angular.JS. Gdy ta dyrektywa zostanie wdrożona na stronie HTML, w zasadzie mówi Angularowi, że ta strona HTML jest aplikacją angular.js.
Przykład np-aplikacji
Poniższy przykład pokazuje, jak używać dyrektywy ng-app. W tym przykładzie po prostu pokażemy, jak przekształcić zwykłą aplikację HTML w aplikację angularJS.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="">
Tutorial Name : {{ "Angular" + "JS"}}
</div>
</body>
</html>
Wyjaśnienie kodu:
- Do naszego znacznika div dodano dyrektywę „ng-app”, 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 znaków.
Jeśli kod zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.
Wyjście:
Dane wyjściowe wyraźnie pokazują wynik wyrażenia, które było możliwe tylko dzięki zdefiniowaniu aplikacji jako aplikacji angularjs.
ng-init w AngularJS
Służy do inicjowania danych aplikacji. Czasami możesz potrzebować pewnych danych lokalnych dla swojej aplikacji, można to zrobić za pomocą dyrektywy ng-init.
Przykład 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.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="" ng-init="TutorialName='Angular JS'">
Tutorial Name : {{ TutorialName}}
</div>
</body>
</html>
Wyjaśnienie kodu:
- Dyrektywa ng-init została dodana do naszego znacznika div w celu zdefiniowania zmiennej lokalnej o nazwie „Nazwa Tutorialu”, a jej wartość to „AngularJS”.
- Używamy wyrażeń w AngularJs do wyświetlania danych wyjściowych nazwy zmiennej „TutorialName”, która została zdefiniowana w naszej dyrektywie ng-init.
Jeśli kod zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.
Wyjście:
Na wyjściu
- Wynik wyraźnie pokazuje wynik wyrażenia zawierającego ciąg „AngularJS”. Dzieje się tak w wyniku przypisania ciągu „AngularJS” do zmiennej „TutorialName” w sekcji ng-init.
model ng w AngularJS
Na koniec mamy dyrektywę ng-model, która służy do powiązania wartości kontrolki HTML z danymi aplikacji. Poniższy przykład pokazuje, jak używać dyrektywy ng-model.
Przykład modelu ng
W tym przykładzie
- Stworzymy 2 zmienne zwane „ilością” i „ceną”. Zmienne te 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.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="" ng-init="quantity=1;price=5">
People : <input type="number" ng-model="quantity">
Registration Price : <input type="number" ng-model="price">
Total : {{quantity * price}}
</div>
</body>
</html>
Wyjaśnienie kodu:
- Do naszego znacznika div dodano dyrektywę ng-init 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 ze zmiennymi lokalnymi „ilość” i „cena”.
- Na koniec pokazujemy sumę za pomocą wyrażenia, które jest iloczynem zmiennych ilości i ceny.
Jeśli kod zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.
Wyjście:
- Dane wyjściowe wyraźnie pokazują pomnożenie wartości osób i ceny rejestracji.
Teraz, jeśli przejdziesz do pól tekstowych i zmienisz wartość „Ludzie” i „Cena rejestracyjna”, kwota całkowita zmieni się automatycznie.
- Powyższe dane wyjściowe pokazują po prostu siłę wiązania danych w angularJs, którą osiąga się za pomocą dyrektywa ng-model.
ng-powtórz w AngularJS
Służy do powtarzania elementu HTML. Poniższy przykład pokazuje, jak używać dyrektywa ng-repeat.
Przykład powtórzenia ng
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
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="" ng-init="chapters=['Controllers','Models','Filters']">
<ul>
<li ng-repeat="names in chapters">
{{names}}
</li>
</ul>
</div>
</body>
</html>
Wyjaśnienie kodu:
- Dyrektywa ng-init została dodana do naszego znacznika div w celu zdefiniowania zmiennej zwanej „rozdziałami”, która jest zmienną tablicową zawierającą 3 ciągi znaków.
- Element ng-repeat jest używany poprzez zadeklarowanie wbudowanej zmiennej o nazwie „names” i przejrzenie każdego elementu tablicy Chapters.
- Na koniec pokazujemy wartość lokalnej zmiennej inline o nazwie „names”.
Jeśli kod zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.
Wyjście:
- Powyższe dane wyjściowe pokazują po prostu, że dyrektywa ng-repeat pobrała każdą wartość z tablicy zwanej „rozdziałami” i utworzyła elementy listy HTML dla każdego elementu tablicy.
Podsumowanie
- Dyrektywy służą do rozszerzania funkcjonalności HTML. Angular zapewnia wbudowane dyrektywy, takie jak
- ng-app – służy do inicjowania aplikacji kątowej.
- ng-init – służy do tworzenia zmiennych aplikacji
- ng-model – służy do powiązania kontrolek HTML z danymi aplikacji
- ng-repeat – Służy do powtarzania elementów za pomocą kąta.
