Hva er et AngularJS-direktiv?
Et direktiv i AngularJS er en kommando som gir HTML ny funksjonalitet. Når kantete går gjennom HTML-koden, vil den først finne retningslinjene på siden og deretter analysere HTML-siden deretter.
Et enkelt eksempel på et AngularJS-direktiv, som vi har sett i tidligere kapitler, er "ng-model directive". Dette direktivet brukes til å binde datamodellen vår til vårt syn.
Merk: Du kan ha grunnleggende vinkelkode på en HTML-side med ng-init, ng-repeat og ng-modelldirektivene uten behov for å ha kontrollere. Logikken for disse direktivene er i Angular.js-filen som leveres av Google. Kontrollere er neste nivå vinkelprogrammeringskonstruksjoner som tillater forretningslogikk, men som nevnt for en applikasjon å være en kantet applikasjon er det ikke obligatorisk å ha en kontroller.
I denne veiledningen vil du lære-
- Hvordan lage direktiv
- ng-app
- ng-init
- ng-modell
- ng-gjenta
Hvordan lage direktiv
Som vi definerte i innledningen, er AngularJS-direktiver en måte å utvide funksjonaliteten til HTML.
Det er fire direktiver definert i AngularJS.
Nedenfor er listen over AngularJS-direktivene sammen med eksempler som er gitt for å forklare hver enkelt av dem.
1) ng-app
Dette brukes til å initialisere et Angular.JS-program. Når dette direktivet er på plass på en HTML-side, forteller det i utgangspunktet Angular at denne HTML-siden er et angular.js-program.
Eksemplet nedenfor viser hvordan du bruker ng-app-direktivet. I dette eksemplet skal vi ganske enkelt vise hvordan du lager et vanlig HTML-program til en angularJS-applikasjon.
Event Registration Guru99 Global Event
Tutorial Name : {{ "Angular" + "JS"}}
Kode Forklaring:
- Direktivet "ng-app" er lagt til div-koden vår for å indikere at dette programmet er et angular.js-program. Vær oppmerksom på at ng-app-direktivet kan brukes på hvilken som helst tag, slik at den også kan legges i body-taggen.
- Fordi vi har definert dette programmet som et angular.js-program, kan vi nå bruke angular.js-funksjonaliteten. I vårt tilfelle bruker vi uttrykk for å bare sammenkoble 2 strenger.
Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren.
Produksjon:
Utgangen viser tydelig utdataene til uttrykket som bare ble gjort mulig fordi vi definerte applikasjonen som et angularjs-program.
2) ng-init
Dette brukes til å initialisere applikasjonsdata. Noen ganger kan det hende du trenger noen lokale data for søknaden din. Dette kan gjøres med ng-init-direktivet.
Eksemplet nedenfor viser hvordan du bruker ng-init-direktivet.
I dette eksemplet skal vi lage en variabel kalt "TutorialName" ved hjelp av ng-init-direktivet og vise verdien til den variabelen på siden.
Event Registration Guru99 Global Event
Tutorial Name : {{ TutorialName}}
Kode Forklaring:
- Direktivet ng-init legges til div-koden vår for å definere en lokal variabel kalt "TutorialName" og verdien som er gitt til dette er "AngularJS".
- Vi bruker uttrykk i AngularJs for å vise utdataene til variabelnavnet "TutorialName" som ble definert i ng-init-direktivet.
Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren.
Produksjon:
I utgangen,
- Resultatet viser tydelig utdataene til uttrykket som inneholder strengen "AngularJS". Dette er som et resultat av at strengen "AngularJS" er tilordnet variabelen 'TutorialName' i seksjonen ng-init.
3) ng-modell
Og til slutt har vi ng-modelldirektivet, som brukes til å binde verdien av en HTML-kontroll til applikasjonsdata. Eksemplet nedenfor viser hvordan du bruker ng-modelldirektivet.
I dette eksemplet,
- Vi skal lage 2 variabler kalt "mengde" og "pris". Disse variablene kommer til å være bundet til to tekstinntastingskontroller.
- Vi skal da vise det totale beløpet basert på multiplikasjonen av både pris- og mengdeverdier.
Event Registration Guru99 Global Event
People : Registration Price : Total : {{quantity * price}}
Kode Forklaring:
- Ng-init-direktivet er lagt til div-koden vår for å definere to lokale variabler; den ene kalles "mengde" og den andre er "pris".
- Nå bruker vi ng-modelldirektivet til å binde tekstboksene til henholdsvis "People" og "Registration price" til våre lokale variabler "kvantitet" og "pris".
- Til slutt viser vi Total via et uttrykk, som er multiplikasjonen av mengden og prisvariablene.
Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren.
Produksjon:
- Resultatet viser tydelig multiplikasjon av verdiene for personer og registreringspris.
Nå, hvis du går til tekstboksene og endrer verdien på People and Registration-prisen, endres Total automatisk.
- Ovennevnte utgang viser bare kraften til databinding i angularJs, som oppnås ved bruk av ng-modelldirektivet.
4) ng-gjenta
Dette brukes til å gjenta et HTML-element. Eksemplet nedenfor viser hvordan du bruker ng-repeat-direktivet.
I dette eksemplet,
- Vi skal ha en rekke kapittelnavn i en matrixvariabel og
- bruk deretter ng-repeat-direktivet for å vise hvert element i matrisen som et listeelement
Event Registration Guru99 Global Event
- {{names}}
Kode Forklaring:
- Ng-init-direktivet er lagt til div-koden vår for å definere en variabel kalt "kapitler", som er en arrayvariabel som inneholder 3 strenger.
- Elementet ng-repeat brukes ved å erklære en innebygd variabel kalt "navn" og gå gjennom hvert element i kapitlene.
- Til slutt viser vi verdien av den lokale innebygde variabelen 'navn'.
Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren.
Produksjon:
- Ovennevnte utdata viser bare at ng-repeat-direktivet tok hver verdi i matrisen kalt "kapitler" og opprettet HTML-listeelementer for hvert element i matrisen.
Sammendrag
- Direktiver brukes til å utvide funksjonaliteten til HTML. Angular gir innebygde direktiver som
- ng-app - Dette brukes til å initialisere en vinkelapplikasjon.
- ng-init - Dette brukes til å lage applikasjonsvariabler
- ng-model - Dette brukes til å binde HTML-kontroller til applikasjonsdata
- ng-repeat - Brukes til å gjenta elementer ved bruk av vinkel.