AngularJS-direktiivit: ng-init, ng-app, ng-model ja ng-repeat

by: James Hartman James Hartman
Hours Päivitetty

⚡ Älykäs yhteenveto

AngularJS-direktiivit laajentavat tavallista HTML:ää uusilla toiminnoilla. ng-app-, ng-init-, ng-model- ja ng-repeat-markkerit käynnistävät sovelluksen, syöttävät paikallisia tietoja, sitovat lomakekomponentit malliin ja kloonaavat elementtejä kerran kokoelman kohdetta kohden.

  • 🧩 Perusidea: Direktiivi on HTML-elementissä oleva merkinnän ominaisuus, joka käskee AngularJS-kääntäjää liittämään siihen käyttäytymisen.
  • 🚀 Bootstrap Kohta: ng-app määrittää juurielementin ja käynnistää AngularJS:n automaattisesti heti sivun latauduttua.
  • 🧮 Paikalliset tiedot: ng-init määrittää aloitusarvot laajuusmuuttujille merkintöjen sisällä ilman ohjainta.
  • 🔄 Kaksisuuntainen sidonta: ng-model linkittää syötteen, valinnan tai tekstialueen scope-ominaisuuteen, joten muokkaukset päivittävät mallin välittömästi.
  • 📋 Toistetut merkinnät: ng-repeat kloonaa isäntäelementtinsä kerran jokaista taulukon tai objektin alkiota kohden.
  • 🎛️ Neljä kutsumuotoa: restrict-ominaisuus hyväksyy E:n, A:n, C:n ja M:n elementti-, attribuutti-, luokka- ja kommenttisyntaksille.
  • 📚 Laajempi kirjasto: AngularJS toimittaa kymmeniä sisäänrakennettuja direktiivejä, mukaan lukien ng-bind, ng-if, ng-show, ng-class ja ng-click.
Lue lisää

AngularJS-direktiivit

Mikä on AngularJS:n direktiivi?

A Direktiivi AngularJS:ssä on komento, joka antaa HTML:lle uusia toimintoja. Kun AngularJS käy läpi HTML-koodia, se ensin löytää sivulta direktiivit ja jäsentää sitten HTML-sivun niiden mukaisesti. Yksinkertainen esimerkki AngularJS-direktiivistä, jonka olemme nähneet aiemmissa luvuissa, on "ng-model-direktiivi". Tätä direktiiviä käytetään datamallin sitomiseen näkymään.

Huomautus: Voit luoda HTML-sivulle perus-AngularJS-koodia ng-init-, ng-repeat- ja ng-model-direktiiveillä ilman ohjaimia. Näiden direktiivien logiikka on AngularJS-tiedostossa, jonka tarjoaa GoogleOhjaimet ovat seuraavan tason AngularJS-ohjelmointirakenteita, jotka mahdollistavat liiketoimintalogiikan, mutta kuten mainittiin, sovelluksen ei tarvitse välttämättä olla ohjainta, jotta se olisi AngularJS-sovellus.

Mutta miten selain päätyy käyttämään sellaista?

Miten AngularJS-direktiivit toimivat HTML:ssä

Kuten johdannossa määrittelimme, AngularJS-direktiivi on tapa laajentaa funktion toiminnallisuutta HTMLKun sivu latautuu, AngularJS-kääntäjä käy läpi DOM:n, vertaa kutakin elementtiä rekisteröityihin direktiiveihin ja liittää löytämänsä toiminnan.

angularjs sisältää kymmeniä sisäänrakennettuja direktiivejä, sekä kaikki itse rekisteröimäsi direktiivit. Aloittelijat kohtaavat ensin neljä alla selitettyä esimerkkidirektiiviä – ng-app, ng-init, ng-model ja ng-repeat. Ennen näitä esimerkkejä on syytä tutustua neljään tapaan, joilla direktiivi voidaan kirjoittaa.

Mitkä ovat neljä AngularJS-direktiivien tyyppiä?

Direktiivi ei aina ole attribuutti. AngularJS-kääntäjä voi löytää vastaavan elementin nimen, attribuutin, luokan nimen tai kommentin perusteella, ja jokainen direktiivi määrittelee, mitkä muodot se hyväksyy sen kautta. restrict ominaisuus. Oletusarvo on EA, joten sekä elementti- että attribuuttisyntaksi toimivat, ellet toisin määrää. Arvo on tärkein, kun kirjoitat oman direktiivin, koska kääntäjä jättää huomiotta kaikki lomakkeet, jotka rajoitusarvo sulkee pois.

raja-arvo Vastaava Esimerkki merkinnästä Tyypillinen käyttö
E Elementin nimi Itsenäiset lohkot, joilla on mallipohja
A Ominaisuus Käyttäytymisen lisääminen olemassa olevaan elementtiin
C Luokan nimi Vanhat merkinnät, jotka eivät voi ottaa uusia määritteitä käyttöön
M Kommentti Harvinainen, säilytetty taaksepäin yhteensopivuuden vuoksi

💡 Vinkki: Suosi elementtien ja attribuuttien syntaksia. virallinen AngularJS-direktiivin viite käsittelee luokka- ja kommenttilomakkeita perinteisinä vaihtoehtoina. Alla olevat esimerkit käyttävät kaikki attribuuttisyntaksia.

AIHEESEEN LIITTYVÄT ARTIKKELIT

ng-app AngularJS:ssä

Tätä käytetään AngularJS-sovelluksen alustamiseen. Kun tämä direktiivi on käytössä HTML-sivulla, se kertoo AngularJS:lle, että kyseinen HTML-sivu on AngularJS-sovellus.

Esimerkki ng-sovelluksesta

Alla oleva esimerkki näyttää, kuinka tavallisesta HTML-sovelluksesta tehdään AngularJS-sovellus.

ng-app AngularJS:ssä

<!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>

⚠️ Varoitus: Listaus säilyttää alkuperäisen chrset="UTF 8", täsmälleen julkaistussa muodossa. Oikea attribuutti on charset="UTF-8".

Code Selitys:

  1. ”ng-app”-direktiivi lisätään div-tagiimme osoittamaan, että kyseessä on AngularJS-sovellus. Huomaa, että ng-app-direktiiviä voidaan soveltaa mihin tahansa tagiin, joten se voidaan sijoittaa myös body-tagiin.
  2. Koska olemme määritelleet tämän sovelluksen AngularJS-sovellukseksi, voimme nyt hyödyntää AngularJS-toiminnallisuutta. Tässä tapauksessa käytämme lausekkeita yksinkertaisesti kahden merkkijonon yhdistämiseen.

Jos koodi suoritetaan onnistuneesti, alla oleva tuloste tulee näkyviin.

lähtö:

ng-app AngularJS:ssä

Tuloste näyttää lausekkeen tulosteen selvästi, mikä oli mahdollista vain siksi, että määrittelimme sovelluksen AngularJS-sovellukseksi. Seuraava direktiivi toimittaa sen tiedot.

ng-init AngularJS:ssä

Tätä käytetään sovellustietojen alustamiseen. Joskus sovelluksesi saattaa tarvita paikallisia tietoja, ja tämä voidaan tehdä ng-init-direktiivillä.

Esimerkki ng-initistä

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.

ng-init AngularJS:ssä

<!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>

Code Selitys:

  1. ng-init-direktiivi lisätään div-tunnisteeseemme paikallisen muuttujan "TutorialName" määrittämiseksi, ja tälle annettu arvo on "AngularJS".
  2. Käytämme AngularJS:ssä lausekkeita näyttääksemme ng-init-direktiivissä määritellyn muuttujan "TutorialName" tulosteen.

Jos koodi suoritetaan onnistuneesti, alla oleva tuloste tulee näkyviin.

lähtö:

ng-init AngularJS:ssä

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.

Seuraava direktiivi lähettää tiedot näytöltä takaisin malliin.

ng-malli AngularJS:ssä

Ja lopuksi meillä on ng-model-direktiivi, jota käytetään HTML-kontrollin arvon sitomiseen sovellustietoihin.

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.

ng-malli AngularJS:ssä

<!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>

Code Selitys:

  1. ng-init-direktiivi lisätään div-tunnisteeseen määrittelemään 2 paikallista muuttujaa; yksi on nimeltään "määrä" ja toinen on "hinta".
  2. Nyt käytämme ng-mallin direktiiviä sitomaan tekstilaatikot "Ihmiset" ja "Rekisteröintihinta" paikallisiin muuttujiimme "määrä" ja "hinta".
  3. Lopuksi näytämme kokonaissumman lausekkeen kautta, joka on määrä- ja hintamuuttujien kertolasku.

Jos koodi suoritetaan onnistuneesti, alla oleva tuloste tulee näkyviin.

lähtö:

ng-malli AngularJS:ssä

  • Tulos näyttää selvästi ihmisten ja rekisteröintihinnan arvojen kertoimen.

Jos nyt muutat tekstiruutujen Henkilömäärä- ja Rekisteröintihinta-arvoja, Kokonaissumma muuttuu automaattisesti.

ng-malli AngularJS:ssä

  • Yllä oleva tuloste osoittaa AngularJS:n datasidonnan tehokkuuden, joka saavutetaan käyttämällä ng-mallin direktiivi.

Viimeinen neljästä käsittelee useita arvoja samanaikaisesti.

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

ng-repeat AngularJS:ssä

<!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>

Code Selitys:

  1. ng-init-direktiivi lisätään div-tunnisteeseemme määrittelemään muuttuja nimeltä "chapters", joka on 3 merkkijonoa sisältävä taulukkomuuttuja.
  2. ng-repeat -elementtiä käytetään ilmoittamalla rivimuuttuja nimeltä "names" ja käymällä läpi jokainen elementti lukutaulukossa.
  3. Lopuksi näytämme paikallisen rivimuuttujan 'names' arvon.

Jos koodi suoritetaan onnistuneesti, alla oleva tuloste tulee näkyviin.

lähtö:

ng-repeat AngularJS:ssä

  • Yllä oleva tulos osoittaa vain, että ng-repeat-direktiivi otti jokaisen taulukon arvon, jota kutsutaan "luvuiksi", ja loi HTML-luettelokohteet jokaiselle taulukon kohteelle.

Nuo neljä kattavat käynnistyksen, datan, sidonnan ja toiston. Alla oleva lista näyttää, mitä seuraavaksi tapahtuu.

Muita yleisesti käytettyjä sisäänrakennettuja AngularJS-direktiivejä

Yllä olevat neljä direktiiviä ovat lähtöjoukko, eivät koko kirjastoa. Jokainen alla oleva merkintä on attribuutti, jonka sijoitat suoraan sen ohjaamaan elementtiin.

  • ng-sidonta: Kirjoittaa laajuusarvon elementin tekstiin näyttämättä lyhyesti raakoja aaltosulkeita latauksen yhteydessä.
  • ng-if: Poistaa elementin DOM:sta, kun sen lauseke on epätosi, ja luo sen uudelleen, kun se on tosi.
  • ng-näytä ja ng-piilota: Togglnäkyvyys CSS:n avulla. Elementti pysyy DOM:ssa, joten toistuvat vaihdot maksavat vähemmän.
  • ng-luokka: Lisää tai poistaa CSS-luokkia lausekkeesta, jolloin tyyli seuraa mallia.
  • ng-klikkaus: Suorittaa lausekkeen tai vaikutusaluefunktion, kun käyttäjä napsauttaa elementtiä.
  • ng-ohjain: Liittää ohjaimen merkintälohkoon, kun sivu on ng-init-lohkon ulkopuolella.
  • ng-poistettu käytöstä ja ng-vain lukeminen: Aseta vastaava lomakeattribuutti aina, kun niiden lauseke on tosi.

Alla olevat usein kysytyt kysymykset vastaavat useimmin tätä luetteloa seuraaviin kysymyksiin.

UKK

AngularJS normalisoi attribuuttien nimet ennen niiden yhdistämistä. Se poistaa kaikki x- tai data- etuliitteet ja muuntaa sitten yhdysviivan, kaksoispisteen tai alaviivan erottimet camel-kirjainkokoisiksi. Siksi data-ng-app, x-ng-app ja ng:app kaikki ratkaisevat saman ngApp-direktiivin.

Molemmat tulostavat laajuusarvon. Interpolointilauseke voi näyttää lyhyesti raa'at aaltosulkeet ennen kuin AngularJS:n latautuminen on valmis, kun taas ng-bind jättää elementin tyhjäksi, kunnes käännös on valmis. ng-bind on parempi vaihtoehto tekstille, joka näkyy taitoksen yläpuolella.

Ei. AngularJS:n virallinen tuki päättyi tammikuussa 2022, joten uusia korjauksia ei julkaista. Olemassa olevat sivut toimivat edelleen, mutta uudet projektit pitäisi aloittaa modernilla Angularilla, jossa näistä direktiiveistä tulee komponentteja ja rakennedirektiivejä, kuten *ngIf ja *ngFor.

Osittain. Avustajat, kuten GitHub Copilot Kirjoita ng-repeat uudelleen muotoon *ngFor ja ng-if muotoon *ngIf luotettavasti. Soveltuvuusalueen periytyminen, kaksisuuntaiset sidokset ja mukautetut linkkifunktiot vaativat edelleen ihmisen tarkistuksen ennen siirretyn koodin lähettämistä.

Liitä merkinnät, moduulin määrittely ja konsolin tuloste kohtaan ChatGPT ja kysyä, mikä direktiivi ei löytänyt täsmää. Yleensä se havaitsee puuttuvan ng-app-parametrin, väärin kirjoitetun attribuutin tai restrict-arvon, joka estää valitsemasi syntaksin.

Tiivistä tämä viesti seuraavasti: