AngularJS direktívák: ng-init, ng-app, ng-model és ng-repeat
James Hartman
⚡ Okos összefoglaló
Az AngularJS direktívák új viselkedéssel bővítik a sima HTML-t. Az ng-app, ng-init, ng-model és ng-repeat markerek elindítják az alkalmazást, helyi adatokat küldenek be, űrlapvezérlőket kötnek a modellhez, és gyűjteményelemenként egyszer klónozzák az elemeket.
Mi az irányelv az AngularJS-ben?
A Irányelv Az AngularJS-ben található parancs új funkciókat ad a HTML-nek. Amikor az AngularJS végigmegy a HTML-kódon, először megkeresi az oldalon található 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áttunk, az „ng-model direktíva”. Ezt az direktívát használjuk az adatmodellünk nézethez kötésére.
Jegyzet: Egy HTML oldalon alapvető AngularJS kódot használhatsz az ng-init, ng-repeat és ng-model direktívákkal vezérlők nélkül. Ezen direktívák logikája az AngularJS fájlban található, amelyet a következő biztosít: GoogleA vezérlők a következő szintű AngularJS programozási konstrukciók, amelyek lehetővé teszik az üzleti logikát, de ahogy említettük, ahhoz, hogy egy alkalmazás AngularJS alkalmazás legyen, nem kötelező vezérlővel rendelkeznie.
De hogyan futtatja végül egy böngésző ezt?
Hogyan működnek az AngularJS direktívák HTML-ben?
Ahogy a bevezetőben definiáltuk, az AngularJS direktíva egy módja a funkcionalitás kibővítésének HTMLAmikor az oldal betöltődik, az AngularJS fordító végigjárja a DOM-ot, összeveti az egyes elemeket a regisztrált direktívákkal, és csatolja a talált viselkedést.
AngularJS több tucat beépített direktívával rendelkezik, plusz olyanokkal, amelyeket te magad regisztrálsz. Az alábbiakban bemutatott négy, működő példákkal illusztrált direktíva – ng-app, ng-init, ng-model és ng-repeat – az, amelyekkel a kezdők először találkoznak. Mielőtt ezeket a példákat bemutatnánk, nézzük meg a direktívák négyféle megírási módját.
Melyek az AngularJS direktívák négy típusa?
Egy direktíva nem mindig attribútum. Az AngularJS fordító elemnév, attribútum, osztálynév vagy megjegyzés alapján tud egyezést létrehozni, és minden direktíva deklarálja, hogy mely formákat fogadja el a restrict tulajdonság. Az alapértelmezett érték EA, tehát az elem- és attribútumszintaxis is működik, hacsak másképp nem jelezzük. Az érték a legfontosabb, ha saját direktívát írunk, mivel a fordító figyelmen kívül hagy minden olyan űrlapot, amelyet a korlátozó érték kizár.
| korlátozó érték | Egyezik a következővel: | Példa jelölésre | Tipikus felhasználás |
|---|---|---|---|
| E | Elem neve | Önálló blokkok, amelyek sablonnal rendelkeznek | |
| A | Attribútum | Viselkedés hozzáadása egy meglévő elemhez | |
| C | Osztály név | Régi jelölőnyelv, amely nem vehet fel új attribútumokat | |
| M | Megjegyzés | Ritka, a visszafelé kompatibilitás érdekében megtartva |
👍 Tipp: Az elem- és attribútumszintaxist részesítsd előnyben. hivatalos AngularJS direktíva hivatkozás az osztály- és megjegyzésűrlapokat korábbi opciókként kezeli. Az alábbi példák mind attribútumszintaxist használnak.
ng-app az AngularJS-ben
Ez egy AngularJS alkalmazás inicializálására szolgál. Amikor ez az utasítás bekerül egy HTML oldalba, alapvetően közli az AngularJS-sel, hogy ez a HTML oldal egy AngularJS alkalmazás.
ng-app példa
Az alábbi példa bemutatja, hogyan lehet egy normál HTML alkalmazásból AngularJS alkalmazást készíteni.
<!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>
⚠️ Figyelmeztetés: A lista megtartja az eredetit chrset="UTF 8", pontosan úgy, ahogy közzétéve. A helyes attribútum: charset="UTF-8".
Code Magyarázat:
- Az „ng-app” direktívát hozzáadjuk a div taghez, hogy jelezzük, hogy ez az alkalmazás egy AngularJS alkalmazás. Fontos megjegyezni, hogy az ng-app direktíva bármely tagre alkalmazható, így a body tagbe is beilleszthető.
- Mivel ezt az alkalmazást AngularJS alkalmazásként definiáltuk, most már használhatjuk az AngularJS funkcionalitását. Esetünkben kifejezéseket használunk két karakterlánc egyszerű összefűzésére.
Ha a kód sikeresen végrehajtódik, az alábbi kimenet jelenik meg.
output:
A kimenet világosan mutatja a kifejezés kimenetét, ami csak azért lehetséges, mert az alkalmazást AngularJS alkalmazásként definiáltuk. A következő direktíva adja meg az adatait.
ng-init az AngularJS-ben
Ez az alkalmazásadatok inicializálására szolgál. Előfordulhat, hogy az alkalmazáshoz helyi adatokra van szükség, ezt az ng-init direktívával lehet megtenni.
Példa az ng-init-re
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>
Code Magyarázat:
- 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éseit használjuk a „TutorialName” változónév kimenetének megjelenítéséhez, amelyet az ng-init direktívánkban definiáltunk.
Ha a kód sikeresen végrehajtódik, az alábbi kimenet jelenik meg.
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.
A következő direktíva visszaküldi az adatokat a képernyőről a modellbe.
ng-modell AngularJS-ben
Végül pedig ott van az ng-model direktíva, amely egy HTML vezérlő értékének alkalmazásadatokhoz kötésére szolgál.
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>
Code Magyarázat:
- 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 végrehajtódik, az alábbi kimenet jelenik meg.
output:
- A kimenet egyértelműen mutatja az emberek és a regisztrációs ár értékeinek szorzatát.
Ha most módosítja a Személyek és a Regisztrációs ár értékét a szövegmezőkben, az Összesen automatikusan megváltozik.
- A fenti kimenet jól mutatja az AngularJS adatkötésének erejét, amelyet a használatával érnek el. ng-modell direktíva.
A négy közül az utolsó egyszerre sok értéket kezel.
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>
Code Magyarázat:
- 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 végrehajtódik, az alábbi kimenet jelenik meg.
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.
Ez a négy a startupot, az adatkezelést, a kötést és az ismétlést foglalja magában. Az alábbi lista bemutatja, hogy mi következik.
Egyéb gyakran használt beépített AngularJS direktívák
A fenti négy direktíva a kiinduló halmazt alkotja, nem a teljes könyvtárat. Az alábbi bejegyzések mindegyike egy attribútum, amelyet közvetlenül az általuk vezérelt elemhez rendelünk.
- ng-kötés: Hatóköri értéket ír be egy elem szövegébe anélkül, hogy betöltéskor rövid időre megjelenítené a nyers zárójeleket.
- ng-if: Eltávolítja az elemet a DOM-ból, ha a kifejezés hamis, és újraépíti, ha igaz.
- ng-show és ng-hide: TogglLáthatóság CSS-sel. Az elem a DOM-ban marad, így az ismételt váltás olcsóbb.
- ng-osztály: CSS osztályokat ad hozzá vagy távolít el egy kifejezésből, lehetővé téve, hogy a stílus kövesse a modellt.
- ng-kattintás: Kifejezést vagy hatókörfüggvényt futtat, amikor a felhasználó az elemre kattint.
- ng-vezérlő: Egy vezérlőt csatol egy jelölőkód blokkhoz, miután az oldal kinövi az ng-init-et.
- ng-letiltva és ng-csak olvasható: Állítsa be az egyező form attribútumot, amikor a kifejezésük igaz.
Az alábbi GYIK a listát követő leggyakoribb kérdésekre ad választ.
