Directive AngularJS: ng-init, ng-app, ng-model și ng-repeat
James Hartman
Ce este Directiva în AngularJS?
A Directivă în AngularJS este o comandă care oferă HTML nouă funcționalitate. Când Angular parcurge codul HTML, va găsi mai întâi directivele în pagină și apoi va analiza pagina HTML în consecință. Un exemplu simplu de directivă AngularJS, pe care l-am văzut în capitolele anterioare este „directiva ng-model”. Această directivă este folosită pentru a lega modelul nostru de date de punctul nostru de vedere.
Notă: Puteți avea cod unghiular de bază într-o pagină HTML cu directivele ng-init, ng-repeat și ng-model fără a fi nevoie de controlere. Logica pentru aceste directive este în fișierul Angular.js care este furnizat de Google. Controllerele sunt constructele de programare unghiulară de nivel următor care permit logica de afaceri, dar așa cum sa menționat pentru ca o aplicație să fie o aplicație unghiulară, nu este obligatoriu să aveți un controler.
Cum se creează directive în AngularJS
După cum am definit în introducere, directivele AngularJS reprezintă o modalitate de a extinde funcționalitatea HTML.
Există 4 directive definite în AngularJS.
Mai jos este lista directivelor AngularJS împreună cu exemple furnizate pentru a explica fiecare dintre ele.
ng-app în AngularJS
Acesta este folosit pentru a inițializa o aplicație Angular.JS. Când această directivă este în vigoare într-o pagină HTML, practic îi spune lui Angular că această pagină HTML este o aplicație angular.js.
Exemplu de aplicație np
Exemplul de mai jos arată cum să utilizați directiva ng-app. În acest exemplu, pur și simplu vom arăta cum să transformăm o aplicație HTML normală într-o aplicație angularJS.
<!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>
Explicația codului:
- Directiva „ng-app” este adăugată etichetei noastre div pentru a indica faptul că această aplicație este o aplicație angular.js. Rețineți că directiva ng-app poate fi aplicată oricărei etichete, deci poate fi pusă și în eticheta body.
- Deoarece am definit această aplicație ca o aplicație angular.js, acum putem folosi funcționalitatea angular.js. În cazul nostru, folosim expresii pentru a concatena pur și simplu 2 șiruri.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată atunci când rulați codul în browser.
ieșire:
Ieșirea arată în mod clar rezultatul expresiei, care a fost posibil doar pentru că am definit aplicația ca o aplicație angularjs.
ng-init în AngularJS
Acesta este folosit pentru a inițializa datele aplicației. Uneori este posibil să aveți nevoie de câteva date locale pentru aplicația dvs., acest lucru se poate face cu directiva ng-init.
Exemplu de ng-init
Exemplul de mai jos arată cum se utilizează directiva ng-init.
În acest exemplu, vom crea o variabilă numită „TutorialName” folosind directiva ng-init și vom afișa valoarea acelei variabile pe pagină.
<!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>
Explicația codului:
- Directiva ng-init este adăugată etichetei noastre div pentru a defini o variabilă locală numită „TutorialName”, iar valoarea dată acesteia este „AngularJS”.
- Folosim expresii în AngularJs pentru a afișa rezultatul numelui de variabilă „TutorialName”, care a fost definit în directiva noastră ng-init.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată atunci când rulați codul în browser.
ieșire:
În ieșire,
- Rezultatul arată clar rezultatul expresiei care conține șirul „AngularJS”. Acest lucru se datorează faptului că șirul „AngularJS” a fost atribuit variabilei „TutorialName” în secțiunea ng-init.
ng-model în AngularJS
Și, în sfârșit, avem directiva ng-model, care este folosită pentru a lega valoarea unui control HTML la datele aplicației. Exemplul de mai jos arată cum să utilizați directiva ng-model.
Exemplu de ng-model
În acest exemplu,
- Vom crea 2 variabile numite „cantitate” și „preț”. Aceste variabile vor fi legate la 2 controale de introducere a textului.
- Apoi vom afișa suma totală pe baza înmulțirii atât a valorilor prețului, cât și a cantității.
<!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>
Explicația codului:
- Directiva ng-init este adăugată etichetei noastre div pentru a defini 2 variabile locale; unul se numește „cantitate”, iar celălalt este „preț”.
- Acum folosim directiva ng-model pentru a lega casetele de text „Oameni” și „Prețul de înregistrare” la variabilele noastre locale „cantitate” și, respectiv, „preț”.
- În cele din urmă, arătăm Totalul printr-o expresie, care este înmulțirea variabilelor de cantitate și preț.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată atunci când rulați codul în browser.
ieșire:
- Ieșirea arată clar înmulțirea valorilor pentru Oameni și Prețul de înregistrare.
Acum, dacă accesați casetele de text și modificați valoarea Prețului Persoane și Înregistrare, Totalul se va schimba automat.
- Ieșirea de mai sus arată doar puterea legării de date în angularJs, care este obținută prin utilizarea directiva ng-model.
ng-repeat în AngularJS
Acesta este folosit pentru a repeta un element HTML. Exemplul de mai jos arată cum se utilizează directiva ng-repeat.
Exemplu de ng-repeat
În acest exemplu,
- Vom avea o matrice de nume de capitole într-o variabilă matrice și
- apoi utilizați directiva ng-repeat pentru a afișa fiecare element al matricei ca element de listă
<!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>
Explicația codului:
- Directiva ng-init este adăugată etichetei noastre div pentru a defini o variabilă numită „capitole” care este o variabilă matrice care conține 3 șiruri.
- Elementul ng-repeat este folosit prin declararea unei variabile inline numită „nume” și parcurgerea fiecărui element din matricea de capitole.
- În cele din urmă, arătăm valoarea variabilei locale inline „nume”.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată atunci când rulați codul în browser.
ieșire:
- Ieșirea de mai sus arată doar că directiva ng-repeat a luat fiecare valoare din matrice numită „capitole” și a creat elemente de listă HTML pentru fiecare element din matrice.
Rezumat
- Directivele sunt folosite pentru a extinde funcționalitatea HTML. Angular oferă directive încorporate, cum ar fi
- ng-app – Acesta este folosit pentru a inițializa o aplicație unghiulară.
- ng-init – Acesta este folosit pentru a crea variabile de aplicație
- ng-model – Acesta este folosit pentru a lega controalele HTML la datele aplicației
- ng-repeat – Folosit pentru a repeta elemente folosind unghiular.