Kas ir AngularJS direktīva?
Direktīva AngularJS ir komanda, kas HTML nodrošina jaunu funkcionalitāti. Kad leņķiskais iet cauri HTML kodam, tas vispirms lapā atrod direktīvas un pēc tam attiecīgi parsē HTML lapu.
Vienkāršs AngularJS direktīvas piemērs, ko mēs redzējām iepriekšējās nodaļās, ir "ng modeļa direktīva". Šo direktīvu izmanto, lai mūsu datu modeli saistītu ar mūsu viedokli.
Piezīme. Jums var būt pamata leņķiskais kods HTML lapā ar direktīvām ng-init, ng-repeat un ng-model bez nepieciešamības izmantot kontrolierus. Šo direktīvu loģika ir failā Angular.js, kuru nodrošina Google. Kontrolieri ir nākamā līmeņa leņķiskās programmēšanas konstrukcijas, kas ļauj veikt biznesa loģiku, taču, kā minēts, lai lietojumprogramma būtu leņķiska lietojumprogramma, nav obligāti jābūt kontrolierim.
Šajā apmācībā jūs uzzināsiet
- Kā izveidot direktīvu
- ng-app
- ng-init
- ng-modelis
- ng-atkārtot
Kā izveidot direktīvu
Kā mēs definējām ievadā, AngularJS direktīvas ir veids, kā paplašināt HTML funkcionalitāti.
AngularJS ir definētas 4 direktīvas.
Zemāk ir AngularJS direktīvu saraksts, kā arī sniegtie piemēri, lai paskaidrotu katru no tām.
1) ng-app
To izmanto, lai inicializētu Angular.JS lietojumprogrammu. Kad šī direktīva ir ievietota HTML lapā, tā galvenokārt stāsta Angular, ka šī HTML lapa ir angular.js lietojumprogramma.
Tālāk sniegtajā piemērā parādīts, kā izmantot direktīvu ng-app. Šajā piemērā mēs vienkārši parādīsim, kā padarīt parastu HTML lietojumprogrammu par angularJS lietojumprogrammu.
Event Registration Guru99 Global Event
Tutorial Name : {{ "Angular" + "JS"}}
Koda skaidrojums:
- Direktīva "ng-app" tiek pievienota mūsu tagam, lai norādītu, ka šī lietojumprogramma ir angular.js lietojumprogramma. Ņemiet vērā, ka direktīvu ng-app var piemērot jebkuram tagam, tāpēc to var ievietot arī pamattekstā.
- Tā kā mēs esam definējuši šo lietojumprogrammu kā angular.js lietojumprogrammu, tagad mēs varam izmantot angular.js funkcionalitāti. Mūsu gadījumā mēs izmantojam izteicienus, lai vienkārši savienotu 2 virknes.
Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.
Izeja:
Izvade skaidri parāda izteiksmes izvadi, kas bija iespējama tikai tāpēc, ka mēs definējām lietojumprogrammu kā angularjs lietojumprogrammu.
2) ng-inic
To izmanto, lai inicializētu lietojumprogrammas datus. Dažreiz jūsu lietojumprogrammai var būt nepieciešami daži vietējie dati, to var izdarīt ar direktīvu ng-init.
Tālāk sniegtajā piemērā parādīts, kā izmantot direktīvu ng-init.
Šajā piemērā mēs izveidosim mainīgo ar nosaukumu "TutorialName", izmantojot direktīvu ng-init, un parādīsim šī mainīgā vērtību lapā.
Event Registration Guru99 Global Event
Tutorial Name : {{ TutorialName}}
Koda skaidrojums:
- Ng-init direktīva tiek pievienota mūsu tagam, lai definētu vietējo mainīgo ar nosaukumu "TutorialName", un tam piešķirtā vērtība ir "AngularJS".
- Mēs izmantojam izteiksmes AngularJs, lai parādītu mainīgā nosaukuma "TutorialName" izvadi, kas tika definēts mūsu ng-init direktīvā.
Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.
Izeja:
Rezultātā
- Rezultāts skaidri parāda izteiksmes iznākumu, kurā ir virkne "AngularJS". Tas ir rezultāts tam, ka virkne "AngularJS" tiek piešķirta mainīgajam "TutorialName" sadaļā ng-init.
3) ng-modelis
Un visbeidzot, mums ir ng modeļa direktīva, kas tiek izmantota, lai saistītu HTML vadības vērtību ar lietojumprogrammas datiem. Tālāk sniegtajā piemērā parādīts, kā izmantot ng-model direktīvu.
Šajā piemērā
- Mēs izveidosim 2 mainīgos, kurus sauc par “daudzums” un “cena”. Šie mainīgie tiks piesaistīti 2 teksta ievades vadīklām.
- Pēc tam mēs parādīsim kopējo summu, pamatojoties uz cenu un daudzuma vērtību reizināšanu.
Event Registration Guru99 Global Event
People : Registration Price : Total : {{quantity * price}}
Koda skaidrojums:
- Ng-init direktīva tiek pievienota mūsu tagam, lai definētu 2 lokālos mainīgos; vienu sauc par "daudzumu", bet otru - par cenu.
- Tagad mēs izmantojam direktīvu ng-model, lai tekstlodziņus "Cilvēki" un "Reģistrācijas cena" saistītu ar mūsu vietējiem mainīgajiem attiecīgi "daudzums" un "cena".
- Visbeidzot, mēs parādām kopējo summu, izmantojot izteiksmi, kas ir daudzuma un cenas mainīgo reizināšana.
Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.
Izeja:
- Rezultātā ir skaidri redzama cilvēku un reģistrācijas cenas vērtību reizināšana.
Tagad, pārejot uz tekstlodziņiem un mainot Cilvēku un Reģistrācijas cenas vērtību, Kopējais automātiski mainīsies.
- Iepriekš minētā izeja tikai parāda datu saistīšanas spēku leņķiskajos J, kas tiek sasniegts, izmantojot ng modeļa direktīvu.
4) atkārtot
To izmanto, lai atkārtotu HTML elementu. Tālāk sniegtajā piemērā parādīts, kā izmantot direktīvu ng-repeat.
Šajā piemērā
- Mums būs nodaļu nosaukumu masīvs masīva mainīgajā un
- pēc tam izmantojiet direktīvu ng-repeat, lai katru masīva elementu parādītu kā saraksta vienumu
Event Registration Guru99 Global Event
- {{names}}
Koda skaidrojums:
- Ng-init direktīva tiek pievienota mūsu tagam, lai definētu mainīgo, ko sauc par "nodaļām", kas ir masīva mainīgais, kas satur 3 virknes.
- Elementu ng-repeat izmanto, deklarējot iekšējo mainīgo ar nosaukumu "nosaukumi" un izejot cauri katram elementam bloku masīvā.
- Visbeidzot, mēs parādām vietējo mainīgo “nosaukumi” vērtību.
Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.
Izeja:
- Iepriekš minētā izeja tikai parāda, ka direktīva ng-repeat aizņēma katru masīva vērtību, ko sauc par "nodaļām", un katram masīva vienumam izveidoja HTML saraksta vienumus.
Kopsavilkums
- HTML funkcionalitātes paplašināšanai tiek izmantotas direktīvas. Angular nodrošina iebūvētas direktīvas, piemēram,
- ng-app - to izmanto, lai inicializētu leņķisko lietojumprogrammu.
- ng-init - to izmanto, lai izveidotu lietojumprogrammas mainīgos
- ng-model - to izmanto, lai saistītu HTML vadīklas ar lietojumprogrammas datiem
- ng-repeat - tiek izmantots, lai atkārtotu elementus, izmantojot leņķisko.