Directive AngularJS: ng-init, ng-app, ng-model și ng-repeat

prin: James Hartman James Hartman
Hours Actualizat

⚡ Rezumat inteligent

Directivele AngularJS extind HTML-ul simplu cu un comportament nou. Markerii ng-app, ng-init, ng-model și ng-repeat pornesc o aplicație, seedează datele locale, leagă controalele formularului la model și clonează elemente o dată per element al colecției.

  • 🧩 Ideea de bază: O directivă este un marker pe un element HTML care îi spune compilatorului AngularJS să îi atașeze un comportament.
  • 🚀 Bootstrap Punct: ng-app declară elementul rădăcină și pornește automat AngularJS imediat ce pagina se încarcă.
  • 🧮 Date locale: ng-init atribuie valori inițiale variabilelor de domeniu din interiorul markup-ului, fără a fi nevoie de un controler.
  • 🔄 Legare bidirecțională: ng-model leagă o intrare, o selecție sau o zonă de text la o proprietate de scop, astfel încât editările actualizează modelul instantaneu.
  • 📋 Marcaj repetat: Funcția ng-repeat clonează elementul gazdă o dată pentru fiecare element dintr-un array sau obiect.
  • 🎛️ Patru forme de invocație: Proprietatea restrict acceptă E, A, C și M pentru element, atribut, clasă și sintaxa de comentarii.
  • 📚 Bibliotecă extinsă: AngularJS oferă zeci de directive încorporate, printre care ng-bind, ng-if, ng-show, ng-class și ng-click.
Citește mai mult

Directivele AngularJS

Ce este Directiva în AngularJS?

A Directivă În AngularJS există o comandă care oferă HTML-ului noi funcționalități. Când AngularJS parcurge codul HTML, 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 am văzut-o în capitolele anterioare, este „directiva ng-model”. Această directivă este utilizată pentru a lega modelul nostru de date la vizualizarea noastră.

Notă: Poți avea cod AngularJS de bază într-o pagină HTML cu directivele ng-init, ng-repeat și ng-model fără a fi nevoie de Controlere. Logica acestor directive se află în fișierul AngularJS, care este furnizat de GoogleControlerele sunt construcții de programare AngularJS de nivel superior care permit logica de business, dar, așa cum am menționat, pentru ca o aplicație să fie o aplicație AngularJS, nu este obligatoriu să aibă un controler.

Dar cum ajunge un browser să ruleze unul?

Cum funcționează directivele AngularJS în HTML

Așa cum am definit în introducere, o directivă AngularJS este o modalitate de a extinde funcționalitatea HTMLCând pagina se încarcă, compilatorul AngularJS parcurge DOM-ul, compară fiecare element cu directivele înregistrate și atașează comportamentul pe care îl găsește.

AngularJS vine cu zeci de directive încorporate, plus orice înregistrări efectuate de dvs. Cele patru directive explicate mai jos cu exemple concrete, ng-app, ng-init, ng-model și ng-repeat, sunt cele pe care începătorii le întâlnesc primele. Înainte de aceste exemple, rețineți cele patru moduri în care o directivă poate fi scrisă.

Care sunt cele patru tipuri de directive AngularJS?

O directivă nu este întotdeauna un atribut. Compilatorul AngularJS poate potrivi una după numele elementului, atributul, numele clasei sau comentariul, iar fiecare directivă declară ce forme acceptă prin intermediul acesteia. restrict proprietate. Valoarea implicită este EA, deci sintaxa elementului și a atributului funcționează atât cu excepția cazului în care specificați altfel. Valoarea contează cel mai mult atunci când scrieți propria directivă, deoarece compilatorul ignoră orice formă pe care valoarea restricționată o exclude.

valoare restricționată Potrivit de Exemplu de marcare Utilizare tipică
E Numele elementului Blocuri autonome care dețin un șablon
A Atribut Adăugarea unui comportament la un element existent
C Numele clasei Marcaj moștenit care nu poate accepta atribute noi
M Comentariu Rar, păstrat pentru compatibilitate inversă

👍 Sfat: Preferați sintaxa elementului și a atributului. referința oficială a directivei AngularJS tratează formularele de clasă și comentarii ca opțiuni moștenite. Toate exemplele de mai jos folosesc sintaxa atributelor.

ARTICOLE SIMILARE

ng-app în AngularJS

Aceasta este utilizată pentru inițializarea unei aplicații AngularJS. Când această directivă este implementată într-o pagină HTML, practic îi spune lui AngularJS că această pagină HTML este o aplicație AngularJS.

Exemplu de aplicație ng

Exemplul de mai jos arată cum se transformă o aplicație HTML normală într-o aplicație AngularJS.

ng-app în 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>

⚠️ Avertisment: Listarea păstrează originalul chrset="UTF 8", exact așa cum a fost publicat. Atributul corect este charset="UTF-8".

Code Explicaţie:

  1. Directiva „ng-app” este adăugată la eticheta noastră div pentru a indica faptul că această aplicație este o aplicație AngularJS. Rețineți că directiva ng-app poate fi aplicată oricărei etichete, deci poate fi plasată și în eticheta body.
  2. Deoarece am definit această aplicație ca o aplicație AngularJS, putem acum utiliza funcționalitatea AngularJS. În cazul nostru, folosim expresii pentru a concatena pur și simplu 2 șiruri de caractere.

Dacă codul se execută cu succes, apare rezultatul de mai jos.

ieșire:

ng-app în AngularJS

Rezultatul arată clar rezultatul expresiei, lucru posibil doar pentru că am definit aplicația ca o aplicație AngularJS. Următoarea directivă furnizează datele acesteia.

ng-init în AngularJS

Aceasta este utilizată pentru inițializarea datelor aplicației. Uneori este posibil să aveți nevoie de anumite date locale pentru aplicația dvs., iar acest lucru se poate face cu directiva ng-init.

Exemplu de ng-init

În acest exemplu, vom crea o variabilă numită „TutorialName” folosind directiva ng-init și vom afișa valoarea acelei variabile pe pagină.

ng-init în 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="" ng-init="TutorialName='Angular JS'">

    Tutorial Name : {{ TutorialName}}

</div>

</body>
</html>

Code Explicaţie:

  1. Directiva ng-init este adăugată etichetei noastre div pentru a defini o variabilă locală numită „TutorialName”, iar valoarea dată acesteia este „AngularJS”.
  2. Folosim expresii în AngularJS pentru a afișa rezultatul variabilei cu numele „TutorialName”, care a fost definită în directiva noastră ng-init.

Dacă codul se execută cu succes, apare rezultatul de mai jos.

ieșire:

ng-init în AngularJS

Î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.

Următoarea directivă trimite date înapoi de pe ecran în model.

ng-model în AngularJS

Și în final, avem directiva ng-model, care este utilizată pentru a lega valoarea unui control HTML de datele aplicației.

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.

ng-model în 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="" 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>

Code Explicaţie:

  1. 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ț”.
  2. 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ț”.
  3. În cele din urmă, arătăm Totalul printr-o expresie, care este înmulțirea variabilelor de cantitate și preț.

Dacă codul se execută cu succes, apare rezultatul de mai jos.

ieșire:

ng-model în AngularJS

  • Ieșirea arată clar înmulțirea valorilor pentru Oameni și Prețul de înregistrare.

Acum, dacă modificați valoarea Persoanelor și Prețul de înregistrare în casetele de text, Totalul se modifică automat.

ng-model în AngularJS

  • Rezultatul de mai sus arată doar puterea legării datelor în AngularJS, care este obținută prin utilizarea directiva ng-model.

Ultimul dintre cele patru gestionează mai multe valori simultan.

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ă

ng-repeat în 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="" ng-init="chapters=['Controllers','Models','Filters']">
    <ul>
        <li ng-repeat="names in chapters">
            {{names}}
        </li>
    </ul>

</div>

</body>
</html>

Code Explicaţie:

  1. 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.
  2. Elementul ng-repeat este folosit prin declararea unei variabile inline numită „nume” și parcurgerea fiecărui element din matricea de capitole.
  3. În cele din urmă, arătăm valoarea variabilei locale inline „nume”.

Dacă codul se execută cu succes, apare rezultatul de mai jos.

ieșire:

ng-repeat în AngularJS

  • 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.

Aceste patru acoperă pornirea, datele, legarea și repetiția. Lista de mai jos arată ce urmează.

Alte directive AngularJS încorporate utilizate în mod obișnuit

Cele patru directive de mai sus reprezintă setul inițial, nu întreaga bibliotecă. Fiecare intrare de mai jos este un atribut pe care îl plasați direct pe elementul pe care îl controlează.

  • ng-bind: Scrie o valoare de domeniu în textul unui element fără a afișa pentru scurt timp acoladele brute la încărcare.
  • ng-if: Elimină elementul din DOM când expresia sa este falsă și îl reconstruiește când este adevărată.
  • ng-show și ng-hide: TogglVizibilitate cu CSS. Elementul rămâne în DOM, deci comutările repetate costă mai puțin.
  • clasa ng: Adaugă sau elimină clase CSS dintr-o expresie, permițând stilizarea să urmeze modelul.
  • ng-clic: Rulează o expresie sau o funcție de domeniu atunci când utilizatorul face clic pe element.
  • controler ng: Atașează un controler la un bloc de markup odată ce pagina depășește ng-init.
  • ng-dezactivat și ng-readonly: Setați atributul de formular corespunzător ori de câte ori expresia sa este adevărată.

Întrebările frecvente de mai jos răspund la întrebările care apar cel mai des după această listă.

Întrebări frecvente

AngularJS normalizează numele atributelor înainte de a le potrivi. Elimină orice prefix x sau data, apoi convertește separatoarele de liniuțe, două puncte sau sublinieri în majuscule/minuscule. De aceea, data-ng-app, x-ng-app și ng:app se rezolvă toate la aceeași directivă ngApp.

Ambele afișează o valoare de domeniu. O expresie de interpolare poate afișa pentru scurt timp acoladele brute înainte ca AngularJS să termine încărcarea, în timp ce ng-bind lasă elementul gol până la finalizarea compilării. Se preferă ng-bind pentru textul care apare deasupra pliului.

Nu. Suportul oficial pentru AngularJS s-a încheiat în ianuarie 2022, așa că nu au fost lansate alte patch-uri. Paginile existente continuă să funcționeze, dar ar trebui să înceapă proiecte noi pe Angular modern, unde aceste directive devin componente și directive structurale, cum ar fi *ngIf și *ngFor.

Parțial. Asistenți precum Copilotul GitHub rescrieți ng-repeat ca *ngFor și ng-if ca *ngIf în mod fiabil. Moștenirea domeniului de aplicare, legăturile bidirecționale și funcțiile de link personalizate necesită în continuare o verificare umană înainte de livrarea codului migrat.

Lipiți markup-ul, declarația modulului și ieșirea consolei în Chat GPT și întreabă ce directivă nu s-a potrivit. De obicei, detectează o lipsă de ng-app, un atribut scris greșit sau o valoare restrict care blochează sintaxa aleasă.

Rezumați această postare cu: