AngularJS direktívák: ng-init, ng-app, ng-model és ng-repeat
James Hartman
Mi az irányelv az AngularJS-ben?
A Irányelv Az AngularJS-ben egy olyan parancs, amely új funkciókat ad a HTML-nek. Amikor az Angular végigmegy a HTML-kódon, először megkeresi az oldalon lévő direktívákat, majd ennek megfelelően elemzi a HTML-oldalt. Egy egyszerű példa az AngularJS direktívára, amelyet a korábbi fejezetekben láthattunk, az „ng-model direktíva”. Ez a direktíva arra szolgál, hogy adatmodellünket a nézetünkhöz kötjük.
Jegyzet: Alapvető szögkódot tartalmazhat egy HTML-oldalon az ng-init, ng-repeat és ng-model direktívákkal anélkül, hogy vezérlőkre lenne szüksége. Ezen irányelvek logikája a Google által biztosított Angular.js fájlban található. A vezérlők a következő szintű szögprogramozási konstrukciók, amelyek lehetővé teszik az üzleti logikát, de amint már említettük, hogy egy alkalmazás szögletes alkalmazás legyen, nem kötelező vezérlővel rendelkeznie.
Irányelvek létrehozása az AngularJS-ben
Ahogy a bevezetőben definiáltuk, az AngularJS direktívák egy mód a funkcionalitás kiterjesztésére HTML.
-ban 4 direktíva van meghatározva AngularJS.
Az alábbiakban található az AngularJS direktívák listája, valamint az egyes példák magyarázata.
ng-app az AngularJS-ben
Ez egy Angular.JS alkalmazás inicializálására szolgál. Ha ez a direktíva a helyén van egy HTML-oldalon, akkor alapvetően azt mondja az Angular-nak, hogy ez a HTML-oldal egy angular.js alkalmazás.
Példa az np-appra
Az alábbi példa bemutatja az ng-app direktíva használatát. Ebben a példában egyszerűen bemutatjuk, hogyan lehet egy normál HTML alkalmazást angularJS alkalmazássá tenni.
<!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>
Kód magyarázata:
- Az „ng-app” direktíva hozzáadódik a div címkénkhoz, jelezve, hogy ez az alkalmazás egy angular.js alkalmazás. Vegye figyelembe, hogy az ng-app direktíva bármely címkére alkalmazható, így a body címkébe is behelyezhető.
- Mivel ezt az alkalmazást angular.js alkalmazásként határoztuk meg, most már használhatjuk az angular.js funkciót. A mi esetünkben kifejezéseket használunk 2 karakterlánc egyszerű összefűzésére.
Ha a kód sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.
output:
A kimeneten jól látható a kifejezés kimenete, ami csak azért vált lehetségessé, mert az alkalmazást angularjs alkalmazásként határoztuk meg.
ng-init az AngularJS-ben
Ez az alkalmazás adatainak inicializálására szolgál. Néha szükség lehet néhány helyi adatra az alkalmazáshoz, ez megtehető az ng-init direktívával.
Példa az ng-init-re
Az alábbi példa bemutatja az ng-init direktíva használatát.
Ebben a példában létrehozunk egy „TutorialName” nevű változót az ng-init direktíva segítségével, és megjelenítjük ennek a változónak az értékét az oldalon.
<!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>
Kód magyarázata:
- Az ng-init direktíva hozzáadódik a div címkénkhoz, hogy meghatározza a „TutorialName” nevű helyi változót, és az ennek adott értéke „AngularJS”.
- Az AngularJs kifejezéseket használjuk a „TutorialName” változónév kimenetének megjelenítésére, amelyet az ng-init direktívánkban határoztunk meg.
Ha a kód sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.
output:
A kimenetben,
- Az eredmény egyértelműen mutatja az „AngularJS” karakterláncot tartalmazó kifejezés kimenetét. Ez annak köszönhető, hogy az „AngularJS” karakterlánc hozzá van rendelve a „TutorialName” változóhoz az ng-init szakaszban.
ng-modell AngularJS-ben
És végül megvan az ng-model direktíva, amely egy HTML-vezérlő értékének alkalmazási adatokhoz való kötésére szolgál. Az alábbi példa bemutatja az ng-model direktíva használatát.
Példa az ng-modellre
Ebben a példában
- Létre fogunk hozni 2 változót, amelyeket „mennyiség” és „ár” neveznek. Ezek a változók 2 szövegbeviteli vezérlőhöz lesznek kötve.
- Ezután megjelenítjük a teljes összeget az ár és a mennyiségi értékek szorzata alapján.
<!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>
Kód magyarázata:
- Az ng-init direktíva hozzáadódik a div címkénkhoz, hogy 2 helyi változót határozzon meg; az egyiket „mennyiségnek”, a másikat „árnak” nevezik.
- Most az ng-model direktívát használjuk, hogy a „People” és a „Registration price” szövegmezőket a „quantity” és a „price” helyi változóinkhoz kötjük.
- Végül egy kifejezésen keresztül mutatjuk meg az Összes értéket, ami a mennyiség és az ár változók szorzata.
Ha a kód sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.
output:
- A kimenet egyértelműen mutatja az emberek és a regisztrációs ár értékeinek szorzatát.
Most, ha a szövegmezőkbe lép, és megváltoztatja az Emberek és a Regisztrációs ár értékét, a Teljesítés automatikusan megváltozik.
- A fenti kimenet csak az adatkötés erejét mutatja angularJs-ban, ami a használatával érhető el ng-modell direktíva.
ng-repeat az AngularJS-ben
Ez egy HTML-elem megismétlésére szolgál. Az alábbi példa bemutatja, hogyan kell használni a ng-repeat direktíva.
Példa az ng-repeat-re
Ebben a példában
- Fejezetnevek tömbje lesz egy tömbváltozóban és
- majd az ng-repeat direktívával jelenítse meg a tömb minden elemét listaelemként
<!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>
Kód magyarázata:
- Az ng-init direktíva hozzáadódik a div címkénkhoz, hogy meghatározza a „chapters” nevű változót, amely egy 3 karakterláncot tartalmazó tömbváltozó.
- Az ng-repeat elemet a „names” nevű soron belüli változó deklarálásával és a Chapters tömb minden elemének végighaladásával használjuk.
- Végül megmutatjuk a 'names' helyi soron belüli változó értékét.
Ha a kód sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.
output:
- A fenti kimenet csak azt mutatja, hogy az ng-repeat direktíva a „fejezeteknek” nevezett tömb minden egyes értékét felvette, és a tömb minden eleméhez HTML listaelemeket hozott létre.
Összegzésként
- Az irányelvek a HTML funkcióinak kiterjesztésére szolgálnak. Az Angular beépített direktívákat biztosít, mint pl
- ng-app – Ez egy szögletes alkalmazás inicializálására szolgál.
- ng-init – Alkalmazásváltozók létrehozására szolgál
- ng-model – Ez a HTML-vezérlők alkalmazásadatokhoz való kötésére szolgál
- ng-repeat – Az elemek szöges ismétlésére szolgál.
