Mikä on AngularJS-direktiivi?
AngularJS: n käsky on komento, joka antaa HTML: lle uuden toiminnallisuuden. Kun kulma käy läpi HTML-koodin, se etsii ensin sivun ohjeet ja jäsentää sitten HTML-sivun vastaavasti.
Yksinkertainen esimerkki AngularJS-direktiivistä, jonka olemme nähneet aikaisemmissa luvuissa, on "ng-mallidirektiivi". Tätä direktiiviä käytetään sitomaan tietomallimme näkemykseemme.
Huomaa: Sinulla voi olla peruskulmakoodi HTML-sivulla ng-init-, ng-repeat- ja ng-malli-direktiiveillä ilman, että tarvitset ohjaimia. Näiden direktiivien logiikka on Angular.js-tiedostossa, jonka Google tarjoaa. Ohjaimet ovat seuraavan tason kulmaohjelmointirakenteita, jotka mahdollistavat liiketoimintalogiikan, mutta kuten sovelluksessa on mainittu kulmasovellukseksi, ohjainta ei ole pakollista.
Tässä opetusohjelmassa opit-
- Kuinka luoda direktiivi
- ng-sovellus
- ng-init
- ng-malli
- ng-toista
Kuinka luoda direktiivi
Kuten johdannossa määriteltiin, AngularJS-direktiivit ovat tapa laajentaa HTML: n toiminnallisuutta.
AngularJS: ssä on määritelty 4 direktiiviä.
Alla on luettelo AngularJS-direktiiveistä sekä esimerkkejä niiden selittämiseksi.
1) ng-sovellus
Tätä käytetään Angular.JS-sovelluksen alustamiseen. Kun tämä direktiivi on paikallaan HTML-sivulla, se kertoo pohjimmiltaan Angularille, että tämä HTML-sivu on angular.js-sovellus.
Alla oleva esimerkki osoittaa, miten ng-app-direktiiviä käytetään. Tässä esimerkissä aiomme yksinkertaisesti näyttää, kuinka normaalista HTML-sovelluksesta tehdään kulmikas JS-sovellus.
Event Registration Guru99 Global Event
Tutorial Name : {{ "Angular" + "JS"}}
Koodin selitys:
- "Ng-app" -direktiivi lisätään div-tagiimme osoittamaan, että tämä sovellus on angular.js-sovellus. Huomaa, että ng-app-direktiiviä voidaan soveltaa mihin tahansa tagiin, joten se voidaan laittaa myös body-tunnisteeseen.
- Koska olemme määrittäneet tämän sovelluksen angular.js-sovellukseksi, voimme nyt käyttää angular.js-toimintoa. Meidän tapauksessamme käytämme lausekkeita yksinkertaisesti ketjuun 2 merkkijonoa.
Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.
Tuotos:
Lähtö osoittaa selvästi lausekkeen lähdön, joka oli mahdollista vain siksi, että määritimme sovelluksen angularjs-sovellukseksi.
2) ng-init
Tätä käytetään sovellustietojen alustamiseen. Joskus saatat tarvita paikallisia tietoja sovelluksellesi, tämä voidaan tehdä ng-init-direktiivillä.
Alla oleva esimerkki osoittaa, kuinka ng-init-direktiiviä käytetään.
Tässä esimerkissä aiomme luoda muuttujan nimeltä "TutorialName" ng-init -direktiivin avulla ja näyttää muuttujan arvon sivulla.
Event Registration Guru99 Global Event
Tutorial Name : {{ TutorialName}}
Koodin selitys:
- Ng-init-direktiivi lisätään div-tagiin määrittelemään paikallinen muuttuja nimeltä "TutorialName", ja sille annettu arvo on "AngularJS".
- Käytämme lausekkeita AngularJ-tiedostoissa näyttämään muuttujan nimen "TutorialName" tulos, joka määriteltiin ng-init-direktiivissä.
Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.
Tuotos:
Lähdössä
- Tulos osoittaa selvästi lausekkeen, joka sisältää merkkijonon "AngularJS", tuotoksen. Tämä johtuu merkkijonosta "AngularJS", joka on määritetty muuttujalle "TutorialName" ng-init-osiossa.
3) ng-malli
Ja lopuksi meillä on ng-malli-direktiivi, jota käytetään sitomaan HTML-ohjaimen arvo sovellustietoihin. Alla olevassa esimerkissä on esitetty ng-mallidirektiivin käyttö.
Tässä esimerkissä
- Aiomme luoda 2 muuttujaa nimeltä "määrä" ja "hinta". Nämä muuttujat sidotaan kahteen tekstinsyöttöohjaimeen.
- Näytämme sitten kokonaissumman sekä hinta- että määräarvojen kertomisen perusteella.
Event Registration Guru99 Global Event
People : Registration Price : Total : {{quantity * price}}
Koodin selitys:
- Ng-init-direktiivi lisätään div-tagiin määrittelemään 2 paikallista muuttujaa; yhtä kutsutaan "määräksi" ja toista "hinnaksi".
- Nyt käytämme ng-mallidirektiiviä sitomaan "Ihmiset" - ja "Rekisteröintihinta" -kentät paikallisiin muuttujiin "määrä" ja "hinta".
- Lopuksi näytetään summa lausekkeen avulla, joka on määrän ja hinnan muuttujien kertolasku.
Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.
Tuotos:
- Tulos osoittaa selvästi ihmisten ja rekisteröintihinnan arvojen kertomisen.
Jos nyt siirryt tekstiruutuihin ja muutat Henkilö- ja Rekisteröintihinnan arvoa, Total muuttuu automaattisesti.
- Yllä oleva lähtö osoittaa vain datan sitomisen voiman kulmissaJ, joka saavutetaan ng-mallidirektiivin avulla.
4) ng-toisto
Tätä käytetään toistamaan HTML-elementti. Alla oleva esimerkki osoittaa, kuinka ng-repeat-direktiiviä käytetään.
Tässä esimerkissä
- Meillä on joukko luvun nimiä taulukon muuttujassa ja
- käytä sitten ng-repeat-käskyä taulukon jokaisen elementin näyttämiseksi luettelokohteena
Event Registration Guru99 Global Event
- {{names}}
Koodin selitys:
- Ng-init-direktiivi lisätään div-tagiin määrittelemään muuttuja nimeltä "chapters", joka on matriisimuuttuja, joka sisältää 3 merkkijonoa.
- Ng-repeat -elementtiä käytetään julistamalla inline-muuttuja nimeltä "names" ja käymällä läpi jokainen lohkoryhmän elementti.
- Lopuksi näytämme paikallisen rivimuuttujan 'nimet' arvon.
Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.
Tuotos:
- Yllä oleva tulos osoittaa vain, että ng-repeat -direktiivi otti taulukon jokaisen arvon nimeltä "luvut" ja loi HTML-luettelon kohteet jokaiselle matriisin kohteelle.
Yhteenveto
- Direktiivejä käytetään HTML: n toiminnallisuuden laajentamiseen. Angular tarjoaa sisäänrakennettuja direktiivejä, kuten
- ng-app - Tätä käytetään kulmasovelluksen alustamiseen.
- ng-init - Tätä käytetään sovelluksen muuttujien luomiseen
- ng-model - Tätä käytetään sitomaan HTML-ohjaimet sovellustietoihin
- ng-repeat - Käytetään elementtien toistamiseen kulmalla.