Kas yra „AngularJS“ direktyva?
„AngularJS“ direktyva yra komanda, suteikianti HTML naujoms funkcijoms. Kai kampinis pereis per HTML kodą, jis pirmiausia suras direktyvas puslapyje ir atitinkamai analizuos HTML puslapį.
Paprastas „AngularJS“ direktyvos pavyzdys, kurį matėme ankstesniuose skyriuose, yra „ng-modelio direktyva“. Ši direktyva naudojama norint susieti mūsų duomenų modelį su mūsų požiūriu.
Pastaba: HTML puslapyje galite turėti pagrindinį kampinį kodą su „ng-init“, „ng-repeat“ ir „ng-model“ direktyvomis, neturėdami valdiklių. Šių direktyvų logika yra „Angular.js“ faile, kurį teikia „Google“. Valdikliai yra kito lygio kampinio programavimo konstrukcijos, leidžiančios verslo logiką, tačiau, kaip minėta, kad programa būtų kampinė programa, valdiklio turėti nėra privaloma.
Šioje pamokoje sužinosite
- Kaip sukurti direktyvą
- „ng-app“
- ng-init
- ng-modelis
- ng-pakartoti
Kaip sukurti direktyvą
Kaip apibrėžėme įžangoje, „AngularJS“ direktyvos yra būdas išplėsti HTML funkcionalumą.
Yra 4 „AngularJS“ apibrėžtos direktyvos.
Žemiau pateikiamas „AngularJS“ direktyvų sąrašas ir pateikiami pavyzdžiai, paaiškinantys kiekvieną iš jų.
1) ng programa
Tai naudojama norint inicijuoti „Angular.JS“ programą. Kai ši direktyva yra HTML puslapyje, ji iš esmės nurodo „Angular“, kad šis HTML puslapis yra „angular.js“ programa.
Žemiau pateiktame pavyzdyje parodyta, kaip naudoti „ng-app“ direktyvą. Šiame pavyzdyje mes tiesiog parodysime, kaip įprastą HTML programą paversti kampine JS programa.
Event Registration Guru99 Global Event
Tutorial Name : {{ "Angular" + "JS"}}
Kodo paaiškinimas:
- „Ng-app“ direktyva pridedama prie mūsų „div“ žymos, kad ši programa būtų „angular.js“ programa. Atminkite, kad „ng-app“ direktyvą galima pritaikyti bet kuriai žymai, todėl ją taip pat galima įdėti į „body“ žymą.
- Kadangi mes apibrėžėme šią programą kaip „angular.js“ programą, dabar galime pasinaudoti „angular.js“ funkcija. Mūsų atveju mes vartojame posakius, kad paprasčiausiai sujungtume 2 stygas.
Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis.
Išvestis:
Išvestis aiškiai parodo išraiškos išvestį, kuri buvo įmanoma tik todėl, kad mes apibrėžėme programą kaip „angularjs“ programą.
2) ng-inic
Tai naudojama norint inicijuoti programos duomenis. Kartais jūsų programai gali prireikti vietinių duomenų, tai galima padaryti naudojant „ng-init“ direktyvą.
Žemiau pateiktame pavyzdyje parodyta, kaip naudoti „ng-init“ direktyvą.
Šiame pavyzdyje mes sukursime kintamąjį, vadinamą „TutorialName“, naudodami „ng-init“ direktyvą, ir parodysime to kintamojo vertę puslapyje.
Event Registration Guru99 Global Event
Tutorial Name : {{ TutorialName}}
Kodo paaiškinimas:
- „Ng-init“ direktyva pridedama prie mūsų „div“ žymos, kad būtų apibrėžtas vietinis kintamasis, vadinamas „TutorialName“, o jam suteikta vertė yra „AngularJS“.
- „AngularJ“ išraiškas naudojame rodydami kintamojo pavadinimo „TutorialName“, kuris buvo apibrėžtas mūsų ng-init direktyvoje, išvestį.
Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis.
Išvestis:
Išvestyje
- Rezultatas aiškiai parodo išraiškos, kurioje yra eilutė „AngularJS“, išvestį. Taip yra dėl eilutės „AngularJS“ priskyrimo kintamajam „TutorialName“ ng-init skyriuje.
3) ng modelis
Galiausiai turime „ng-model“ direktyvą, kuri naudojama susieti HTML valdiklio vertę su programos duomenimis. Žemiau pateiktame pavyzdyje parodyta, kaip naudoti „ng-model“ direktyvą.
Šiame pavyzdyje
- Mes sukursime 2 kintamuosius, vadinamus „kiekis“ ir „kaina“. Šie kintamieji bus susieti su 2 teksto įvesties valdikliais.
- Tada mes parodysime bendrą sumą, pagrįstą kainos ir kiekio verčių padauginimu.
Event Registration Guru99 Global Event
People : Registration Price : Total : {{quantity * price}}
Kodo paaiškinimas:
- „Ng-init“ direktyva pridedama prie mūsų „div“ žymos, kad būtų apibrėžti 2 vietiniai kintamieji; vienas vadinamas „kiekiu“, o kitas - „kaina“.
- Dabar mes naudojame „ng-model“ direktyvą, kad susietume teksto laukelius „Žmonės“ ir „Registracijos kaina“ prie mūsų vietinių kintamųjų „kiekis“ ir „kaina“.
- Galiausiai parodome sumą per išraišką, kuri yra kiekio ir kainos kintamųjų daugyba.
Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis.
Išvestis:
- Išvestis aiškiai parodo žmonių ir registracijos kainos verčių padauginimą.
Dabar, jei eisite į teksto laukelius ir pakeisite Žmonių ir Registracijos kainos vertę, Bendra suma automatiškai pasikeis.
- Pirmiau pateiktoje išvestyje tik parodyta duomenų susiejimo galia kampiniais J, kuri pasiekiama naudojant ng modelio direktyvą.
4) pakartokite
Tai naudojama kartojant HTML elementą. Žemiau pateiktame pavyzdyje parodyta, kaip naudoti „ng-repeat“ direktyvą.
Šiame pavyzdyje
- Turėsime skyrių pavadinimų masyvą masyvo kintamajame ir
- tada naudokite direktyvą ng-repeat, kad kiekvienas masyvo elementas būtų rodomas kaip sąrašo elementas
Event Registration Guru99 Global Event
- {{names}}
Kodo paaiškinimas:
- „Ng-init“ direktyva pridedama prie mūsų „div“ žymos, kad būtų apibrėžtas kintamasis, vadinamas „skyriais“, kuris yra masyvo kintamasis, kuriame yra 3 eilutės.
- Elementas „ng-repeat“ naudojamas deklaruojant kintamąjį, vadinamą „vardais“, ir pereinant kiekvieną skyrių masyvo elementą.
- Galiausiai parodome vietinio kintamojo „vardų“ vertę.
Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis.
Išvestis:
- Pirmiau pateiktas išėjimas tik parodo, kad „ng-repeat“ direktyva perėmė kiekvieną masyvo vertę, vadinamą „skyriais“, ir sukūrė HTML sąrašo elementus kiekvienam masyvo elementui.
Santrauka
- HTML funkcionalumui išplėsti naudojamos direktyvos. „Angular“ pateikia įmontuotas direktyvas, pvz
- ng-app - tai naudojama norint inicijuoti kampinę programą.
- ng-init - tai naudojama kuriant programos kintamuosius
- ng-model - tai naudojama susieti HTML valdiklius su programos duomenimis
- ng-pakartoti - naudojamas kartoti elementus naudojant kampinį.