Hvad er et AngularJS-direktiv?
Et direktiv i AngularJS er en kommando, der giver HTML ny funktionalitet. Når kantet gennemgår HTML-koden, finder den først direktiverne på siden og analyserer derefter HTML-siden i overensstemmelse hermed.
Et simpelt eksempel på et AngularJS-direktiv, som vi har set i tidligere kapitler, er "ng-model-direktivet". Dette direktiv bruges til at binde vores datamodel til vores opfattelse.
Bemærk: Du kan have grundlæggende kantet kode på en HTML-side med ng-init, ng-repeat og ng-model direktiverne uden behov for at have controllere. Logikken for disse direktiver er i filen Angular.js, som leveres af Google. Controllere er det næste niveau vinkelprogrammeringskonstruktioner, der tillader forretningslogik, men som nævnt for en applikation at være en vinkelapplikation er det ikke obligatorisk at have en controller.
I denne vejledning lærer du-
- Sådan oprettes et direktiv
- ng-app
- ng-init
- ng-model
- ng-gentag
Sådan oprettes et direktiv
Som vi definerede i indledningen er AngularJS-direktiver en måde at udvide HTML-funktionaliteten på.
Der er fire direktiver defineret i AngularJS.
Nedenfor er listen over AngularJS-direktiverne sammen med eksempler til rådighed for at forklare hver enkelt af dem.
1) ng-app
Dette bruges til at initialisere et Angular.JS-program. Når dette direktiv er på plads på en HTML-side, fortæller det dybest set Angular, at denne HTML-side er en angular.js-applikation.
Eksemplet nedenfor viser, hvordan du bruger ng-app-direktivet. I dette eksempel skal vi blot vise, hvordan man laver en normal HTML-applikation til en angularJS-applikation.
Event Registration Guru99 Global Event
Tutorial Name : {{ "Angular" + "JS"}}
Kode Forklaring:
- Direktivet "ng-app" føjes til vores div-tag for at indikere, at denne applikation er en angular.js-applikation. Bemærk, at ng-app-direktivet kan anvendes på ethvert tag, så det også også kan sættes i body-tagget.
- Fordi vi har defineret denne applikation som en angular.js-applikation, kan vi nu gøre brug af angular.js-funktionaliteten. I vores tilfælde bruger vi udtryk til at sammenkæde to strenge.
Hvis koden udføres med succes, vises følgende output, når du kører din kode i browseren.
Produktion:
Outputtet viser tydeligt output af udtrykket, som kun blev muliggjort, fordi vi definerede applikationen som en angularjs-applikation.
2) ng-init
Dette bruges til at initialisere applikationsdata. Nogle gange kan du kræve nogle lokale data til din applikation. Dette kan gøres med ng-init-direktivet.
Eksemplet nedenfor viser, hvordan man bruger ng-init-direktivet.
I dette eksempel skal vi oprette en variabel kaldet "TutorialName" ved hjælp af ng-init-direktivet og vise værdien af denne variabel på siden.
Event Registration Guru99 Global Event
Tutorial Name : {{ TutorialName}}
Kode Forklaring:
- Direktivet ng-init føjes til vores div-tag for at definere en lokal variabel kaldet "TutorialName", og den værdi, der gives til dette, er "AngularJS".
- Vi bruger udtryk i AngularJs til at vise output af variabelnavnet "TutorialName", som blev defineret i vores ng-init-direktiv.
Hvis koden udføres med succes, vises følgende output, når du kører din kode i browseren.
Produktion:
I output,
- Resultatet viser tydeligt output af udtrykket, der indeholder strengen "AngularJS". Dette er et resultat af, at strengen "AngularJS" er tildelt variablen 'TutorialName' i sektionen ng-init.
3) ng-model
Og endelig har vi ng-model-direktivet, som bruges til at binde værdien af en HTML-kontrol til applikationsdata. Eksemplet nedenfor viser, hvordan man bruger ng-model-direktivet.
I dette eksempel
- Vi skal oprette 2 variabler kaldet "mængde" og "pris". Disse variabler bliver bundet til 2 kontrolelementer til tekstinput.
- Vi vil derefter vise det samlede beløb baseret på multiplikationen af både pris- og mængdeværdier.
Event Registration Guru99 Global Event
People : Registration Price : Total : {{quantity * price}}
Kode Forklaring:
- Direktivet ng-init føjes til vores div-tag for at definere 2 lokale variabler; den ene kaldes "mængde" og den anden er "pris".
- Nu bruger vi ng-model direktivet til at binde tekstfelterne med henholdsvis "People" og "Registration price" til vores lokale variabler "mængde" og "pris".
- Endelig viser vi Total gennem et udtryk, som er multiplikationen af mængde- og prisvariablerne.
Hvis koden udføres med succes, vises følgende output, når du kører din kode i browseren.
Produktion:
- Outputtet viser tydeligt multiplikationen af værdierne for personer og registreringspris.
Hvis du nu går til tekstfelterne og ændrer værdien for prisen for personer og registrering, ændres totalen automatisk.
- Ovenstående output viser bare styrken af databinding i vinkelJs, hvilket opnås ved brug af ng-model direktivet.
4) ng-gentag
Dette bruges til at gentage et HTML-element. Eksemplet nedenfor viser, hvordan man bruger ng-repeat-direktivet.
I dette eksempel
- Vi vil have en række kapitelnavne i en matrixvariabel og
- brug derefter ng-gentagelsesdirektivet til at vise hvert element i arrayet som et listeelement
Event Registration Guru99 Global Event
- {{names}}
Kode Forklaring:
- Direktivet ng-init tilføjes til vores div-tag for at definere en variabel kaldet "kapitler", som er en matrixvariabel, der indeholder 3 strenge.
- Elementet ng-repeat bruges ved at erklære en indbygget variabel kaldet "navne" og gå gennem hvert element i kapitelarrayet.
- Endelig viser vi værdien af den lokale integrerede variabel 'navne'.
Hvis koden udføres med succes, vises følgende output, når du kører din kode i browseren.
Produktion:
- Ovenstående output viser bare, at ng-repeat-direktivet tog hver værdi i arrayet kaldet "kapitler" og oprettede HTML-listeelementer for hvert element i arrayet.
Resumé
- Direktiver bruges til at udvide funktionaliteten af HTML. Angular giver indbyggede direktiver såsom
- ng-app - Dette bruges til at initialisere en vinkelapplikation.
- ng-init - Dette bruges til at oprette applikationsvariabler
- ng-model - Dette bruges til at binde HTML-kontroller til applikationsdata
- ng-repeat - Bruges til at gentage elementer ved hjælp af vinkel.