AngularJS-direktiver: ng-init, ng-app, ng-model og ng-repeat
James Hartman
Hvad er Direktiv i AngularJS?
A Direktiv i AngularJS er en kommando, der giver HTML ny funktionalitet. Når Angular gennemgår HTML-koden, vil den først finde direktiverne på siden og derefter analysere 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 synspunkt.
Bemærk: Du kan have grundlæggende vinkelkode i en HTML-side med ng-init, ng-repeat og ng-model direktiverne uden at skulle have controllere. Logikken for disse direktiver er i filen Angular.js, som leveres af Google. Controllere er næste niveau vinkelprogrammeringskonstruktioner, der tillader forretningslogik, men som nævnt er det ikke obligatorisk at have en controller for at en applikation skal være en vinkelapplikation.
Sådan opretter du direktiver i AngularJS
Som vi definerede i introduktionen, er AngularJS-direktiver en måde at udvide funktionaliteten af HTML.
Der er 4 direktiver defineret i AngularJS.
Nedenfor er listen over AngularJS-direktiverne sammen med eksempler givet for at forklare hver enkelt af dem.
ng-app i AngularJS
Dette bruges til at initialisere en Angular.JS-applikation. 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.
Eksempel på np-app
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.
<!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>
Kodeforklaring:
- "ng-app"-direktivet er tilføjet til vores div-tag for at angive, at denne applikation er en angular.js-applikation. Bemærk, at ng-app-direktivet kan anvendes på ethvert tag, så det 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 blot at sammenkæde 2 strenge.
Hvis koden eksekveres med succes, vil følgende output blive vist, når du kører din kode i browseren.
Output:
Outputtet viser tydeligt outputtet af udtrykket, som kun blev muliggjort, fordi vi definerede applikationen som en angularjs-applikation.
ng-init i AngularJS
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.
Eksempel på ng-init
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.
<!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>
Kodeforklaring:
- ng-init-direktivet føjes til vores div-tag for at definere en lokal variabel kaldet "TutorialName", og værdien givet til dette er "AngularJS".
- Vi bruger udtryk i AngularJs til at vise outputtet af variabelnavnet "TutorialName", som blev defineret i vores ng-init-direktiv.
Hvis koden eksekveres med succes, vil følgende output blive vist, når du kører din kode i browseren.
Output:
I outputtet,
- Resultatet viser tydeligt outputtet af udtrykket, som indeholder strengen "AngularJS". Dette er et resultat af, at strengen "AngularJS" er tildelt variablen 'TutorialName' i ng-init sektionen.
ng-model i AngularJS
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-modeldirektivet.
Eksempel på ng-model
I dette eksempel
- Vi skal lave 2 variable kaldet "mængde" og "pris". Disse variabler vil være bundet til 2 tekstinputkontroller.
- Vi vil derefter vise det samlede beløb baseret på multiplikationen af både pris- og mængdeværdier.
<!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>
Kodeforklaring:
- ng-init direktivet tilfø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-modeldirektivet til at binde tekstboksene "People" og "Registration price" til vores lokale variabler "quantity" og "price" henholdsvis.
- Til sidst viser vi totalen via et udtryk, som er multiplikationen af mængde- og prisvariablerne.
Hvis koden eksekveres med succes, vil følgende output blive vist, når du kører din kode i browseren.
Output:
- Outputtet viser tydeligt multiplikationen af værdierne for personer og registreringspris.
Nu, hvis du går til tekstfelterne og ændrer værdien af prisen på personer og registrering, vil totalen automatisk ændre sig.
- Ovenstående output viser blot styrken af databinding i angularJs, hvilket opnås ved brug af ng-model direktiv.
ng-gentag i AngularJS
Dette bruges til at gentage et HTML-element. Eksemplet nedenfor viser, hvordan du bruger ng-gentag direktiv.
Eksempel på ng-repeat
I dette eksempel
- Vi kommer til at have en matrix af kapitelnavne i en matrixvariabel og
- brug derefter ng-repeat-direktivet til at vise hvert element i arrayet som et listeelement
<!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>
Kodeforklaring:
- ng-init-direktivet er tilføjet til vores div-tag for at definere en variabel kaldet "kapitler", som er en array-variabel, der indeholder 3 strenge.
- ng-repeat-elementet bruges ved at erklære en inline-variabel kaldet "navne" og gå gennem hvert element i kapitel-arrayet.
- Til sidst viser vi værdien af den lokale inline-variabel 'navne'.
Hvis koden eksekveres med succes, vil følgende output blive vist, når du kører din kode i browseren.
Output:
- Ovenstående output viser blot, 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 som f.eks
- 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.
