Mi az AngularJS irányelv?
Az AngularJS-ben található utasítás olyan parancs, amely új funkcionalitást ad a HTML-nek. Amikor a szögletes végigmegy a HTML kódon, először megtalálja az irányelveket az oldalon, majd a HTML oldalt ennek megfelelően elemzi.
Egy egyszerű példa az AngularJS irányelvre, amelyet a korábbi fejezetekben láthattunk, az "ng-modell irányelv". Ezt az irányelvet arra használjuk, hogy adatmodellünket a nézetünkhöz kössük.
Megjegyzés: Az ng-init, ng-repeat és ng-model direktívákkal alapvető szögletes kódja lehet egy HTML oldalon, 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ögletes programozási konstrukciók, amelyek lehetővé teszik az üzleti logikát, de amint említettük, hogy egy alkalmazás szögletes alkalmazás, nem kötelező vezérlővel rendelkezni.
Ebben az oktatóanyagban megtanulja-
- Hogyan készítsünk irányelvet
- ng-app
- ng-init
- ng-modell
- ng-ismétlés
Hogyan készítsünk irányelvet
Amint azt a bevezetőben definiáltuk, az AngularJS direktívák a HTML funkcionalitásának bővítésére szolgálnak.
Az AngularJS-ben 4 irányelv van meghatározva.
Az alábbiakban felsoroljuk az AngularJS irányelveket, és példákat adunk ezek magyarázatára.
1) n-app
Ez az Angular.JS alkalmazás inicializálására szolgál. Amikor ez az irányelv egy HTML-oldalon van, akkor alapvetően elmondja az Angularnak, hogy ez a HTML-oldal egy angular.js alkalmazás.
Az alábbi példa bemutatja az ng-app irányelv használatát. Ebben a példában egyszerűen bemutatjuk, hogyan lehet egy normál HTML alkalmazást angularJS alkalmazássá tenni.
Event Registration Guru99 Global Event
Tutorial Name : {{ "Angular" + "JS"}}
Kód Magyarázat:
- Az "ng-app" irányelv hozzáadódik a div címkénkhez, jelezve, hogy ez az alkalmazás egy angular.js alkalmazás. Ne feledje, hogy az ng-app irányelv bármilyen címkére alkalmazható, így a törzscímkébe is beilleszthető.
- Mivel ezt az alkalmazást angular.js alkalmazásként definiáltuk, mostantól kihasználhatjuk az angular.js funkciót. Esetünkben 2 húr egyszerű összefűzésére használjuk a kifejezéseket.
A kód sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot.
Kimenet:
A kimenet egyértelműen mutatja a kifejezés kimenetét, ami csak azért volt lehetséges, mert az alkalmazást angularjs alkalmazásként definiáltuk.
2) ng-init
Ez az alkalmazás adatainak inicializálására szolgál. Előfordulhat, hogy szüksége van néhány helyi adatra az alkalmazásához, ezt megteheti az ng-init irányelvvel.
Az alábbi példa bemutatja az ng-init irányelv használatát.
Ebben a példában létrehozunk egy "TutorialName" nevű változót az ng-init irányelv segítségével, és megjelenítjük a változó értékét az oldalon.
Event Registration Guru99 Global Event
Tutorial Name : {{ TutorialName}}
Kód Magyarázat:
- Az ng-init direktíva hozzáadódik a div tagünkhöz, hogy meghatározza a "TutorialName" nevű helyi változót, és ennek az értéke "AngularJS".
- Az AngularJs kifejezéseket használjuk az ng-init irányelvünkben definiált "TutorialName" változó kimenetének megjelenítésére.
A kód sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot.
Kimenet:
A kimenetben
- Az eredmény jól mutatja a kifejezés kimenetét, amely az "AngularJS" karakterláncot tartalmazza. Ennek az az eredménye, hogy az ng-init szakaszban a "TutorialName" változóhoz rendelték az "AngularJS" karakterláncot.
3) ng-modell
És végül megvan az ng-model direktíva, amelyet arra használunk, hogy egy HTML vezérlő értékét az alkalmazás adataihoz kössük. Az alábbi példa bemutatja az ng-model irányelv használatát.
Ebben a példában
- 2 változót fogunk létrehozni, úgynevezett "mennyiség" és "ár" néven. Ezek a változók 2 szövegbeviteli vezérlőhöz lesznek kötve.
- Ezután meg fogjuk jeleníteni a teljes összeget az ár és a mennyiség értékének szorzása alapján.
Event Registration Guru99 Global Event
People : Registration Price : Total : {{quantity * price}}
Kód Magyarázat:
- Az ng-init direktíva hozzáadódik a div tagünkhöz 2 helyi változó definiálásához; az egyiket "mennyiségnek", a másikat "árnak" hívják.
- Most az ng-model direktívát használjuk arra, hogy az "Emberek" és a "Regisztrációs ár" szövegdobozokat a "mennyiség", illetve "ár" helyi változókhoz kössük.
- Végül kifejezzük az Összeget, amely a mennyiségi és az árváltozók szorzata.
A kód sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot.
Kimenet:
- A kimeneten jól látható az Emberek és a Regisztrációs ár értékeinek szorzata.
Ha most meglátogatja a szövegdobozokat, és megváltoztatja a People és a regisztrációs ár értékét, akkor az Total automatikusan megváltozik.
- A fenti kimenet csak az adatkötés erejét mutatja szögJ-kben, amelyet az ng-model irányelv alkalmazásával érünk el.
4) ng-ismétlés
Ez egy HTML elem megismétlésére szolgál. Az alábbi példa bemutatja az ng-repeat irányelv használatát.
Ebben a példában
- Lesz egy tömb fejezetnév egy tömb változóban és
- majd az ng-repeat irányelv segítségével jelenítse meg a tömb minden elemét listaelemként
Event Registration Guru99 Global Event
- {{names}}
Kód Magyarázat:
- Az ng-init direktíva hozzáadódik a div tagünkhöz, hogy meghatározzuk a "fejezetek" nevű változót, amely egy 3 karakterláncot tartalmazó tömb változó.
- Az ng-repeat elemet úgy használjuk, hogy deklarálunk egy "nevek" nevű inline változót, és végigmegyünk a fejezetek tömbjének minden egyes elemén.
- Végül megmutatjuk a helyi „inline” változó értékét.
A kód sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot.
Kimenet:
- A fenti kimenet csak azt mutatja, hogy az ng-repeat direktíva felvette a tömb minden értékét, az úgynevezett "fejezeteket", és létrehozott HTML-listaelemeket a tömb minden eleméhez.
Összegzés
- Az irányelveket a HTML funkcionalitásának bővítésére használják. Az Angular beépített irányelveket biztosít, mint pl
- ng-app - Ez egy szögletes alkalmazás inicializálására szolgál.
- ng-init - Ez az alkalmazásváltozók létrehozására szolgál
- ng-model - Ez arra szolgál, hogy a HTML-vezérlőket alkalmazási adatokhoz kösse
- ng-repeat - Az elemek szöggel történő megismétlésére szolgál.