AngularJS-direktiivit: ng-init, ng-app, ng-model ja ng-repeat
James Hartman
Mikä on AngularJS:n direktiivi?
A Direktiivi AngularJS:ssä on komento, joka antaa HTML:lle uusia toimintoja. Kun Angular käy läpi HTML-koodin, se löytää ensin käskyt sivulta ja jäsentää sitten HTML-sivun vastaavasti. Yksinkertainen esimerkki AngularJS-direktiivistä, jonka olemme nähneet aiemmissa luvuissa, on "ng-mallidirektiivi". Tätä direktiiviä käytetään sitomaan tietomallimme näkemyksemme mukaan.
Huomautus: Sinulla voi olla peruskulmakoodi HTML-sivulla ng-init-, ng-repeat- ja ng-model-käskyjen kanssa ilman ohjaimia. Näiden ohjeiden logiikka on Googlen tarjoamassa Angular.js-tiedostossa. Ohjaimet ovat seuraavan tason kulmaohjelmointirakenteita, jotka mahdollistavat liiketoimintalogiikan, mutta kuten mainittiin, jotta sovellus olisi kulmikas sovellus, ohjaimen käyttö ei ole pakollista.
Kuinka luoda direktiivejä AngularJS: ssä
Kuten määritimme johdannossa, AngularJS-direktiivit ovat tapa laajentaa toimintoja HTML.
Kohdassa on 4 direktiiviä angularjs.
Alla on luettelo AngularJS-direktiiveistä sekä esimerkkejä, jotka selittävät jokaista niistä.
ng-app AngularJS:ssä
Tätä käytetään Angular.JS-sovelluksen alustamiseen. Kun tämä ohje on käytössä HTML-sivulla, se periaatteessa kertoo Angularille, että tämä HTML-sivu on angular.js-sovellus.
Esimerkki np-sovelluksesta
Alla oleva esimerkki näyttää, kuinka ng-app-direktiiviä käytetään. Tässä esimerkissä aiomme yksinkertaisesti näyttää, kuinka normaalista HTML-sovelluksesta tehdään angularJS-sovellus.
<!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>
Koodin selitys:
- "ng-app"-direktiivi lisätään div-tunnisteeseemme 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 hyödyntää angular.js-toimintoa. Meidän tapauksessamme käytämme lausekkeita yksinkertaisesti yhdistämään 2 merkkijonoa.
Jos koodi suoritetaan onnistuneesti, seuraava tulos näytetään, kun suoritat koodin selaimessa.
lähtö:
Tulos näyttää selvästi lausekkeen tulosteen, joka oli mahdollista vain, koska määritimme sovelluksen angularjs-sovellukseksi.
ng-init AngularJS:ssä
Tätä käytetään sovellustietojen alustamiseen. Joskus saatat tarvita joitain paikallisia tietoja sovelluksellesi, tämä voidaan tehdä ng-init-direktiivillä.
Esimerkki ng-initistä
Alla oleva esimerkki näyttää kuinka ng-init -direktiiviä käytetään.
Tässä esimerkissä aiomme luoda muuttujan nimeltä "TutorialName" käyttämällä ng-init-direktiiviä ja näytämme tämän muuttujan arvon sivulla.
<!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>
Koodin selitys:
- ng-init-direktiivi lisätään div-tunnisteeseemme paikallisen muuttujan "TutorialName" määrittämiseksi, ja tälle annettu arvo on "AngularJS".
- Käytämme AngularJs-lausekkeita näyttämään muuttujan nimen "TutorialName" tulos, joka määritettiin ng-init-direktiivissämme.
Jos koodi suoritetaan onnistuneesti, seuraava tulos näytetään, kun suoritat koodin selaimessa.
lähtö:
Ulostulossa,
- Tulos näyttää selkeästi lausekkeen, joka sisältää merkkijonon "AngularJS", tulos. Tämä johtuu siitä, että merkkijono "AngularJS" on määritetty muuttujaan "TutorialName" ng-init-osassa.
ng-malli AngularJS:ssä
Ja lopuksi, meillä on ng-mallin direktiivi, jota käytetään HTML-komponentin arvon sitomiseen sovellustietoihin. Alla oleva esimerkki näyttää kuinka ng-model-direktiiviä käytetään.
Esimerkki ng-mallista
Tässä esimerkissä
- Aiomme luoda 2 muuttujaa nimeltä "määrä" ja "hinta". Nämä muuttujat sidotaan kahteen tekstinsyöttösäätimeen.
- Näytämme sitten kokonaissumman, joka perustuu sekä hinta- että määräarvojen kertomiseen.
<!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>
Koodin selitys:
- ng-init-direktiivi lisätään div-tunnisteeseen määrittelemään 2 paikallista muuttujaa; yksi on nimeltään "määrä" ja toinen on "hinta".
- Nyt käytämme ng-mallin direktiiviä sitomaan tekstilaatikot "Ihmiset" ja "Rekisteröintihinta" paikallisiin muuttujiimme "määrä" ja "hinta".
- Lopuksi näytämme kokonaissumman lausekkeen kautta, joka on määrä- ja hintamuuttujien kertolasku.
Jos koodi suoritetaan onnistuneesti, seuraava tulos näytetään, kun suoritat koodin selaimessa.
lähtö:
- Tulos näyttää selvästi ihmisten ja rekisteröintihinnan arvojen kertoimen.
Jos nyt siirryt tekstiruutuihin ja muutat Henkilö- ja Rekisteröintihinnan arvoa, Kokonaissumma muuttuu automaattisesti.
- Yllä oleva tulos näyttää vain tietojen sitomisen tehon angularJs:ssä, joka saavutetaan käyttämällä ng-mallin direktiivi.
ng-repeat AngularJS:ssä
Tätä käytetään HTML-elementin toistamiseen. Alla oleva esimerkki näyttää kuinka käyttää ng-repeat direktiivi.
Esimerkki ng-toistosta
Tässä esimerkissä
- Meillä on joukko lukujen nimiä taulukon muuttujassa ja
- Käytä sitten ng-repeat-direktiiviä näyttääksesi jokaisen taulukon elementin luettelokohteena
<!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>
Koodin selitys:
- ng-init-direktiivi lisätään div-tunnisteeseemme määrittelemään muuttuja nimeltä "chapters", joka on 3 merkkijonoa sisältävä taulukkomuuttuja.
- ng-repeat -elementtiä käytetään ilmoittamalla rivimuuttuja nimeltä "names" ja käymällä läpi jokainen elementti lukutaulukossa.
- Lopuksi näytämme paikallisen rivimuuttujan 'names' arvon.
Jos koodi suoritetaan onnistuneesti, seuraava tulos näytetään, kun suoritat koodin selaimessa.
lähtö:
- Yllä oleva tulos osoittaa vain, että ng-repeat-direktiivi otti jokaisen taulukon arvon, jota kutsutaan "luvuiksi", ja loi HTML-luettelokohteet jokaiselle taulukon kohteelle.
Yhteenveto
- Direktiivejä käytetään laajentamaan HTML:n toimivuutta. Angular tarjoaa sisäänrakennettuja direktiivejä, kuten
- ng-app – Tätä käytetään kulmasovelluksen alustamiseen.
- ng-init – Tätä käytetään sovellusmuuttujien luomiseen
- ng-malli – Tätä käytetään HTML-säätimien sitomiseen sovellustietoihin
- ng-repeat – Käytetään elementtien toistamiseen kulmikkaalla.
