Kaj je direktiva AngularJS?
Direktiva v AngularJS je ukaz, ki daje HTML novo funkcionalnost. Ko angular preide skozi kodo HTML, bo najprej našel direktive na strani in nato ustrezno razčlenil stran HTML.
Preprost primer direktive AngularJS, ki smo ga videli v prejšnjih poglavjih, je "direktiva o modelu ng". Ta direktiva se uporablja za vezavo našega podatkovnega modela na naš pogled.
Opomba: Na strani HTML lahko imate osnovno kotno kodo z direktivami ng-init, ng-repeat in ng-model, ne da bi morali imeti krmilnike. Logika teh direktiv je v datoteki Angular.js, ki jo zagotavlja Google. Krmilniki so konstrukcije kotnega programiranja naslednje stopnje, ki omogočajo poslovno logiko, toda kot je omenjeno, da je aplikacija kotna aplikacija, ni obvezno imeti krmilnika.
V tej vadnici boste izvedeli-
- Kako ustvariti direktivo
- ng-app
- ng-init
- ng-model
- ng-ponovitev
Kako ustvariti direktivo
Kot smo opredelili v uvodu, so smernice AngularJS način za razširitev funkcionalnosti HTML.
V AngularJS so definirane 4 direktive.
Spodaj je seznam direktiv AngularJS skupaj s primeri, ki pojasnjujejo vsako od njih.
1) ng-app
S tem se inicializira aplikacija Angular.JS. Ko je ta direktiva na mestu HTML, v bistvu pove Angularju, da je ta stran HTML aplikacija angular.js.
Spodnji primer prikazuje, kako uporabljati direktivo ng-app. V tem primeru bomo preprosto pokazali, kako iz običajne aplikacije HTML narediti aplikacijo angularJS.
Event Registration Guru99 Global Event
Tutorial Name : {{ "Angular" + "JS"}}
Razlaga kode:
- Direktiva "ng-app" je dodana naši oznaki div, da označuje, da je ta aplikacija angular.js aplikacija. Upoštevajte, da je direktivo ng-app mogoče uporabiti za katero koli oznako, zato jo lahko vstavite tudi v oznako telesa.
- Ker smo to aplikacijo opredelili kot aplikacijo angular.js, lahko zdaj uporabimo funkcionalnost angular.js. V našem primeru uporabljamo izraze za preprosto povezovanje 2 nizov.
Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.
Izhod:
Rezultat jasno prikazuje rezultat izraza, ki je bil omogočen le zato, ker smo aplikacijo opredelili kot aplikacijo angularjs.
2) ng-init
To se uporablja za inicializacijo podatkov aplikacije. Včasih boste morda potrebovali nekaj lokalnih podatkov za svojo aplikacijo, kar lahko storite z direktivo ng-init.
Spodnji primer prikazuje, kako uporabljati direktivo ng-init.
V tem primeru bomo s pomočjo direktive ng-init ustvarili spremenljivko, imenovano "TutorialName", in na strani prikazali vrednost te spremenljivke.
Event Registration Guru99 Global Event
Tutorial Name : {{ TutorialName}}
Razlaga kode:
- Direktiva ng-init je dodana naši oznaki div za definiranje lokalne spremenljivke, imenovane "TutorialName", vrednost, ki ji je dana, pa je "AngularJS".
- Izraze v AngularJs uporabljamo za prikaz rezultatov imena spremenljivke "TutorialName", ki je bilo definirano v naši direktivi ng-init.
Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.
Izhod:
V izhodu,
- Rezultat jasno prikazuje rezultat izraza, ki vsebuje niz "AngularJS". To je posledica dodelitve niza "AngularJS" spremenljivki "TutorialName" v odseku ng-init.
3) ng-model
In končno, imamo direktivo ng-model, ki se uporablja za vezavo vrednosti kontrolnika HTML na podatke aplikacije. Spodnji primer prikazuje, kako uporabiti direktivo ng-model.
V tem primeru
- Ustvarili bomo dve spremenljivki, imenovani "količina" in "cena". Te spremenljivke bodo vezane na 2 kontrolnika za vnos besedila.
- Nato bomo prikazali skupni znesek na podlagi množenja vrednosti cen in količine.
Event Registration Guru99 Global Event
People : Registration Price : Total : {{quantity * price}}
Razlaga kode:
- Direktiva ng-init je dodana naši oznaki div za definiranje 2 lokalnih spremenljivk; eno se imenuje "količina", drugo pa "cena".
- Zdaj direktivo ng-model uporabljamo za vezavo besedilnih poljih "People" in "Registration price" na naše lokalne spremenljivke "količina" oziroma "cena".
- Na koncu prikazujemo skupno vrednost z izrazom, ki je pomnožitev količinskih in cenovnih spremenljivk.
Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.
Izhod:
- Rezultat jasno prikazuje množenje vrednosti za ljudi in ceno registracije.
Če zdaj odprete besedilna polja in spremenite vrednost Ljudje in registracija, se bo skupna vrednost samodejno spremenila.
- Zgornji izhod samo prikazuje moč vezave podatkov v angularJs, kar je doseženo z uporabo direktive ng-model.
4) ng-ponovitev
To se uporablja za ponavljanje elementa HTML. Spodnji primer prikazuje, kako uporabiti direktivo ng-repeat.
V tem primeru
- Imeli bomo niz imen poglavij v spremenljivki polja in
- nato uporabite direktivo ng-repeat za prikaz vsakega elementa polja kot elementa seznama
Event Registration Guru99 Global Event
- {{names}}
Razlaga kode:
- Direktiva ng-init je dodana naši oznaki div za definiranje spremenljivke, imenovane "poglavja", ki je spremenljivka matrike, ki vsebuje 3 nize.
- Element ng-repeat se uporablja z deklariranjem vstavljene spremenljivke, imenovane "imena", in pregledovanjem vsakega elementa v matriki poglavij.
- Na koncu prikazujemo še vrednost lokalne vrstice spremenljivke 'names'.
Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.
Izhod:
- Zgornji izhod samo kaže, da je direktiva ng-repeat sprejela vsako vrednost v matriki, imenovano "poglavja", in ustvarila elemente seznama HTML za vsak element v matriki.
Povzetek
- Direktive se uporabljajo za razširitev funkcionalnosti HTML. Angular ponuja vgrajene direktive, kot so
- ng-app - Uporablja se za inicializacijo kotne aplikacije.
- ng-init - Uporablja se za ustvarjanje spremenljivk aplikacije
- ng-model - Uporablja se za vezavo kontrolnikov HTML na podatke aplikacije
- ng-repeat - Uporablja se za ponavljanje elementov z uporabo kotnih.