Mis on AngularJS-i direktiiv?
AngularJS-i käsk on käsk, mis annab HTML-ile uue funktsionaalsuse. Kui nurgeline läbib HTML-koodi, leiab see kõigepealt lehelt direktiivid ja seejärel sõelub HTML-lehte vastavalt sellele.
Lihtne näide AngularJS-direktiivist, mida oleme varasemates peatükkides näinud, on "ng-mudeli direktiiv". Seda direktiivi kasutatakse meie andmemudeli sidumiseks meie seisukohaga.
Märkus. HTML-lehel võib olla põhiline nurgakood koos direktiividega ng-init, ng-repeat ja ng-model, ilma et teil oleks vaja kontrollereid omada. Nende direktiivide loogika on failis Angular.js, mille pakub Google. Kontrollerid on järgmise taseme nurgaprogrammeerimise konstruktsioonid, mis võimaldavad äriloogikat, kuid nagu mainitud, et rakendus oleks nurgarakendus, pole kontrolleri olemasolu kohustuslik.
Selles õpetuses saate teada
- Kuidas luua direktiivi
- ng-rakendus
- ng-init
- ng-mudel
- ng-kordus
Kuidas luua direktiivi
Nagu sissejuhatuses määratlesime, on AngularJS-i direktiivid viis HTML-i funktsionaalsuse laiendamiseks.
AngularJS-is on määratletud 4 direktiivi.
Allpool on loetelu AngularJS-i direktiividest koos nende näidete selgitamiseks.
1) ng-rakendus
Seda kasutatakse rakenduse Angular.JS initsialiseerimiseks. Kui see direktiiv on HTML-lehel paigas, ütleb see põhimõtteliselt Angularile, et see HTML-leht on rakendus angular.js.
Allpool olev näide näitab, kuidas ng-appi direktiivi kasutada. Selles näites näitame lihtsalt, kuidas muuta tavaline HTML-rakendus nurk-JS-i rakenduseks.
Event Registration Guru99 Global Event
Tutorial Name : {{ "Angular" + "JS"}}
Koodi selgitus:
- Div-märgendile lisatakse direktiiv "ng-app", mis näitab, et see rakendus on rakendus angular.js. Pange tähele, et ng-appi direktiivi saab rakendada igale märgendile, nii et selle saab lisada ka kehamärgendisse.
- Kuna oleme selle rakenduse määranud rakenduseks angular.js, saame nüüd kasutada funktsiooni angular.js. Meie puhul kasutame väljendeid 2 stringi lihtsalt liitmiseks.
Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.
Väljund:
Väljund näitab selgelt avaldise väljundit, mis sai võimalikuks vaid seetõttu, et määratlesime rakenduse kui rakendust angularjs.
2) ng-init
Seda kasutatakse rakenduse andmete initsialiseerimiseks. Mõnikord võite oma rakenduse jaoks vajada kohalikke andmeid, seda saab teha ng-init direktiiviga.
Allpool toodud näide näitab, kuidas ng-init direktiivi kasutada.
Selles näites loome dirigendi ng-init abil muutuja nimega "TutorialName" ja kuvame selle muutuja väärtuse lehel.
Event Registration Guru99 Global Event
Tutorial Name : {{ TutorialName}}
Koodi selgitus:
- Ng-init-i direktiiv lisatakse meie div-märgendile, et määratleda kohalik muutuja nimega "TutorialName" ja sellele antud väärtus on "AngularJS".
- Meie ng-init direktiivis määratletud muutuja nime "TutorialName" väljundi kuvamiseks kasutame väljendeid AngularJ-des.
Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.
Väljund:
Väljundis
- Tulemus näitab selgelt väljendi väljundit, mis sisaldab stringi "AngularJS". Selle põhjuseks on string "AngularJS" määramine ng-init jaotises muutujale "TutorialName".
3) ng-mudel
Ja lõpuks, meil on ng-mudeli direktiiv, mida kasutatakse HTML-juhtelemendi väärtuse sidumiseks rakenduse andmetega. Allpool toodud näide näitab ng-mudeli direktiivi kasutamist.
Selles näites
- Loome 2 muutujat nimega "kogus" ja "hind". Need muutujad seotakse kahe tekstisisestuse juhtelemendiga.
- Seejärel kuvame kogusumma, mis põhineb nii hinna kui ka koguse väärtuste korrutamisel.
Event Registration Guru99 Global Event
People : Registration Price : Total : {{quantity * price}}
Koodi selgitus:
- 2 kohaliku muutuja määratlemiseks lisatakse meie div-märgendile ng-init direktiiv; ühte nimetatakse "koguseks" ja teist "hinnaks".
- Nüüd kasutame ng-mudeli direktiivi, et siduda tekstiruudud "Inimesed" ja "Registreerimishind" vastavalt meie kohalikele muutujatele "kogus" ja "hind".
- Lõpuks näitame koguarvu avaldise kaudu, mis on koguse ja hinna muutujate korrutamine.
Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.
Väljund:
- Väljund näitab selgelt inimeste ja registreerimishinna väärtuste korrutamist.
Nüüd, kui lähete tekstikastidesse ja muudate inimeste ja registreerimise hinna väärtust, muutub summa automaatselt.
- Ülaltoodud väljund näitab lihtsalt andmete sidumise võimsust nurkJ-des, mis saavutatakse ng-mudeli direktiivi kasutamisel.
4) ng-kordus
Seda kasutatakse HTML-elemendi kordamiseks. Allpool toodud näide näitab, kuidas ng-repeat käsku kasutada.
Selles näites
- Meil on massiivi muutuja ja peatükkide nimede massiiv
- seejärel kasutage massiivi iga elemendi loendikirjena kuvamiseks käsku ng-repeat
Event Registration Guru99 Global Event
- {{names}}
Koodi selgitus:
- Ng-init-i direktiiv lisatakse meie div-märgendile muutuja nimega "chapters", mis on massiivi muutuja, mis sisaldab 3 stringi.
- Elementi ng-repeat kasutatakse dünaamilise muutuja nimega "nimed" deklareerimiseks ja peatükkide massiivi iga elemendi läbimiseks.
- Lõpuks näitame kohaliku sisemuutuja 'nimed' väärtust.
Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.
Väljund:
- Ülaltoodud väljund näitab lihtsalt, et ng-repeat direktiiv võttis massiivi iga väärtuse nimega "peatükid" ja lõi massiivi iga üksuse jaoks HTML-loendi üksused.
Kokkuvõte
- HTML-i funktsionaalsuse laiendamiseks kasutatakse direktiive. Nurgeline pakub sisseehitatud direktiive nagu
- ng-app - seda kasutatakse nurkrakenduse initsialiseerimiseks.
- ng-init - seda kasutatakse rakenduse muutujate loomiseks
- ng-model - seda kasutatakse HTML-juhtelementide sidumiseks rakenduse andmetega
- ng-repeat - kasutatakse elementide kordamiseks nurga abil.