Ce este o directivă AngularJS?
O directivă în AngularJS este o comandă care oferă HTML funcționalități noi. Când unghiulare parcurge codul HTML, acesta va găsi mai întâi directivele din 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 utilizată pentru a lega modelul nostru de date de viziunea noastră.
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 să aveți controlere. Logica acestor directive se află în fișierul Angular.js furnizat de Google. Controlerele sunt construcțiile de programare unghiulară de nivel următor care permit logica de afaceri, dar așa cum s-a menționat pentru ca o aplicație să fie o aplicație unghiulară nu este obligatoriu să aveți un controler.
În acest tutorial, veți învăța-
- Cum se creează o directivă
- ng-app
- ng-init
- ng-model
- ng-repetare
Cum se creează o directivă
După cum am definit în introducere, directivele AngularJS sunt 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.
1) ng-app
Aceasta este utilizată pentru a inițializa o aplicație Angular.JS. Când această directivă este în vigoare într-o pagină HTML, aceasta îi spune practic lui Angular că această pagină HTML este o aplicație angular.js.
Exemplul de mai jos arată cum să utilizați directiva ng-app. În acest exemplu, vom arăta pur și simplu cum să facem dintr-o aplicație HTML normală o aplicație angularJS.
Event Registration Guru99 Global Event
Tutorial Name : {{ "Angular" + "JS"}}
Explicatie cod:
- Directiva „ng-app” este adăugată la eticheta noastră 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 corpului.
- Deoarece am definit această aplicație ca o aplicație angular.js, putem folosi acum funcționalitatea angular.js. În cazul nostru, folosim expresii pentru a concatina pur și simplu 2 șiruri.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată când rulați codul în browser.
Ieșire:
Ieșirea arată clar ieșirea expresiei care a fost posibilă doar pentru că am definit aplicația ca o aplicație angularjs.
2) ng-init
Aceasta este utilizată pentru a inițializa datele aplicației. Uneori este posibil să aveți nevoie de unele date locale pentru aplicația dvs., acest lucru se poate face cu directiva 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ă.
Event Registration Guru99 Global Event
Tutorial Name : {{ TutorialName}}
Explicatie cod:
- 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 variabilei „TutorialName” care a fost definit în directiva noastră ng-init.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată 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.
3) modelul ng
Și, în cele din urmă, avem directiva ng-model, care este utilizată pentru a lega valoarea unui control HTML la datele aplicației. Exemplul de mai jos arată cum se utilizează directiva ng-model.
În acest exemplu,
- Vom crea 2 variabile numite „cantitate” și „preț”. Aceste variabile vor fi legate de 2 controale de introducere a textului.
- Apoi vom afișa suma totală pe baza multiplicării atât a prețului, cât și a valorilor cantității.
Event Registration Guru99 Global Event
People : Registration Price : Total : {{quantity * price}}
Explicatie cod:
- Directiva ng-init este adăugată la eticheta noastră div pentru a defini 2 variabile locale; una se numește „cantitate”, iar cealaltă este „preț”.
- Acum folosim directiva ng-model pentru a lega casetele de text „Oameni” și „Preț de înregistrare” la variabilele noastre locale „cantitate”, respectiv „preț”.
- În cele din urmă, arătăm Totalul printr-o expresie, care este multiplicarea variabilelor cantitate și preț.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată când rulați codul în browser.
Ieșire:
- Rezultatul arată în mod clar înmulțirea valorilor pentru Oameni și prețul de înregistrare.
Acum, dacă accesați casetele de text și modificați valoarea Prețului pentru persoane și înregistrare, Totalul se va schimba automat.
- Ieșirea de mai sus arată doar puterea legării de date în angularJs, care se realizează cu utilizarea directivei ng-model.
4) repetați
Acesta este folosit pentru a repeta un element HTML. Exemplul de mai jos arată cum se utilizează directiva ng-repeat.
În acest exemplu,
- Vom avea o serie de nume de capitole într-o variabilă de matrice și
- apoi utilizați directiva ng-repeat pentru a afișa fiecare element al tabloului ca element de listă
Event Registration Guru99 Global Event
- {{names}}
Explicatie cod:
- Directiva ng-init este adăugată la eticheta noastră div pentru a defini o variabilă numită „capitole”, care este o variabilă matrice care conține 3 șiruri.
- Elementul ng-repeat este utilizat prin declararea unei variabile inline numite „nume” și parcurgerea fiecărui element din matricea de capitole.
- În cele din urmă, arătăm valoarea variabilei inline locale „nume”.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată când rulați codul în browser.
Ieșire:
- Ieșirea de mai sus arată 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 utilizate pentru a extinde funcționalitatea HTML. Angular oferă directive încorporate, cum ar fi
- ng-app - Aceasta este utilizată pentru a inițializa o aplicație unghiulară.
- ng-init - Acesta este utilizat pentru a crea variabile ale aplicației
- ng-model - Acesta este utilizat pentru a lega controalele HTML de datele aplicației
- ng-repeat - Folosit pentru a repeta elemente folosind unghiular.