Expresii AngularJS: Matrice, Obiecte, $eval, Șiruri de caractere

prin: James Hartman James Hartman
Hours Actualizat

⚡ Rezumat inteligent

Expresiile AngularJS sunt fragmente de cod plasate între acolade duble care leagă datele direct într-un șablon. Acestea evaluează numere, șiruri de caractere, obiecte și matrice, iar funcția $eval efectuează aceeași evaluare din interiorul unui controler.

  • 🧩 Sintaxa de legare: Double Acoladele afișează o valoare acolo unde se află expresia, dând același rezultat ca și directiva ng-bind.
  • 🔢 Tipuri acceptate: Numbers, șiruri de caractere, JavaObiectele script accesate cu notație punctuală și tablourile accesate prin index se evaluează corect.
  • 🏷️ Variabile în linie: Directiva ng-init declară variabile la nivel de vizualizare pe care expresiile le pot citi apoi fără un controler.
  • 🛡️ Evaluare iertătoare: Proprietățile nedefinite produc nedefinit în loc să arunce eroarea ReferenceError simplă JavaScriptul ar crește.
  • 🚫 Limite dure: Buclele, excepțiile, declarațiile de funcții, expresiile regulate și operatorii virgulă și void nu sunt disponibile.
  • ⚙️ Evaluarea controlorului: `$scope.$eval` evaluează un șir de expresii în codul controlerului și expune rezultatul în vizualizare.
  • ⚠️ Starea asistenței: AngularJS a ajuns la sfârșitul perioadei de funcționare pe 31 decembrie 2021 și nu mai primește alte corecții de securitate.
Citește mai mult

Expresii AngularJS

Ce sunt expresiile AngularJS?

Expresiile sunt variabile scrise între acolade duble {{ }}Acestea sunt foarte frecvent utilizate în AngularJS și apar în tutorialele anterioare din această serie.

⚠️ Notificare de asistență: AngularJS a atins sfârșitul duratei de viață la 31 decembrie 2021 și nu primește alte patch-uri sau corecții de securitate. Sintaxa de mai jos rămâne corectă pentru menținerea aplicațiilor AngularJS 1.x existente; proiectele noi ar trebui să utilizeze limbaj modern Unghiular, unde există încă acolade de interpolare, dar ng-init și $eval nu face.

Explicați expresiile AngularJS cu un exemplu

Expresiile AngularJS sunt scrise între acolade duble, ca în {{expression}}.

Sintaxă: un exemplu simplu de expresie este {{5 + 6}}.

Expresiile AngularJS leagă datele de HTML în același mod ca directiva ng-bind, iar AngularJS afișează datele exact acolo unde este plasată expresia.

În acest exemplu, arătăm o adunare simplă de numere ca expresie.

Expresii AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

    <h1>Guru99 Global Event</h1>

    <div ng-app="">
        Addition : {{6+9}}
    </div>

</body>
</html>

Code Explicaţie:

  1. Directiva ng-app este goală, ceea ce înseamnă că niciun modul nu furnizează controlere, instrucțiuni, sau servicii către această pagină.
  2. O expresie simplă adună două numere.

ieșire:

Expresii AngularJS

Are loc adunarea numerelor 9 și 6, iar rezultatul, 15, este afișat.

AngularJS Numbers

Expresiile funcționează cu numere. Acest exemplu înmulțește două variabile numerice, margin și profitși afișează produsul.

AngularJS Numbers

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

    <h1>Guru99 Global Event</h1>

    <div ng-app="" ng-init="margin=2;profit=200">
        Total profit margin

        {{margin*profit}}
    </div>

</body>
</html>

Code Explicaţie:

  1. Directiva ng-init definește variabilele și valorile acestora chiar în vizualizare, la fel ca variabilele locale din orice limbaj de programare. Aici margin și profit sunt declarate și atribuite.
  2. Expresia înmulțește apoi acele două variabile locale.

ieșire:

AngularJS Numbers

Are loc înmulțirea lui 2 cu 200 și se afișează produsul, 400.

Șiruri de caractere AngularJS

Expresiile funcționează și cu șiruri de caractere. Acest exemplu definește firstName și lastName și afișează ambele.

Șiruri de caractere AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

    <h1>Guru99 Global Event</h1>

    <div ng-app="" ng-init="firstName='Guru';lastName='99'">
        First Name : {{firstName}}<br>
        Last Name : {{lastName}}
    </div>

</body>
</html>

Code Explicaţie:

  1. Directiva ng-init definește firstName cu valoarea „Guru" și lastName cu valoarea „99”.
  2. Expresiile {{firstName}} și {{lastName}} citește acele variabile și afișează-le în vizualizare.

ieșire:

Șiruri de caractere AngularJS

Ambele valori apar pe ecran.

ARTICOLE SIMILARE

Obiecte AngularJS

Expresiile funcționează cu JavaScenariu obiecte, care constau din perechi nume-valoare. Sintaxa unui JavaObiectul Script arată astfel:

var car = {type: "Ford", model: "Explorer", color: "White"};

Acest exemplu definește o person obiect care conține două perechi cheie-valoare, firstName și lastName.

Obiecte AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

<h1>Guru99 Global Event</h1>

<div ng-app="" ng-init="person={firstName:'Guru',lastName:'99'}">
    First Name : {{person.firstName}}<br>
    Last Name : {{person.lastName}}
</div>

</body>
</html>

Code Explicaţie:

  1. Directiva ng-init definește obiectul person cu perechile cheie-valoare firstName setat la "Guru" și lastName setată la „99”.
  2. Expresiile {{person.firstName}} și {{person.lastName}} citește acei membri. Deoarece aparțin obiectului, este necesară notația cu puncte pentru a ajunge la valorile lor.

ieșire:

Obiecte AngularJS

Valorile firstName și lastName apar pe ecran.

Matrice AngularJS

Expresiile funcționează cu tablouri. Acest exemplu definește un tablou care conține notele unui student la trei materii și afișează fiecare valoare.

Matrice AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

<h1>Guru99 Global Event</h1>

<div ng-app="" ng-init="marks=[1,15,19]">
    Student Marks<br>
    Subject1 : {{marks[0]}}<br>
    Subject2 : {{marks[1]}}<br>
    Subject3 : {{marks[2]}}
</div>

</body>
</html>

Code Explicaţie:

  1. Directiva ng-init definește matricea marks cu cele trei valori 1, 15 și 19.
  2. Expresii ale formei marks[index] citește fiecare element.

ieșire:

Matrice AngularJS

Marcajele definite în matrice sunt afișate.

Capacități și limitări AngularJS Expression

Capabilitățile

  1. Expresiile AngularJS seamănă cu JavaExpresiile de script au în comun aceeași putere și flexibilitate.
  2. Unde JavaScriptul generează o eroare ReferenceError sau TypeError asupra unei proprietăți nedefinite, evaluarea AngularJS este permisivă și dă valoare undefined sau null.
  3. Filtrele pot fi aplicate în interiorul unei expresii pentru a formata datele înainte de afișarea acestora.
  4. Operatorul ternar este acceptat, deci {{ isReady ? 'Yes' : 'No' }} este valabil.

Limitări

  1. Buclele și gestionarea excepțiilor nu pot fi utilizate în interiorul unei expresii AngularJS. Logica condițională este limitată la operatorul ternar; if declarațiile nu sunt disponibile.
  2. Funcțiile nu pot fi declarate într-o expresie, nici măcar în interiorul unei directive ng-init.
  3. Expresiile regulate nu pot fi create în interiorul unei expresii. O expresie regulată este o combinație de simboluri și caractere utilizată pentru a potrivi șiruri de caractere, cum ar fi .*\.txt$, iar astfel de literali sunt respinși.
  4. Operatorul de virgulă (,) si void operatorului nu li se permite.

ng-bind vs. acolade de expresie: pe care să le folosiți

Double Acoladele și directiva ng-bind produc aceeași ieșire randată, deci alegerea între ele pare arbitrară. Nu este. Cele două se comportă diferit în momentul în care AngularJS termină de încărcat, iar această diferență este vizibilă pentru persoana care utilizează pagina.

Aspect {{ expression }} ng-bind
Scris in Conținutul elementului Un atribut al elementului
Înainte de încărcarea AngularJS Aparatele dentare brute clipesc pe ecran Nu se arată nimic
Diviziune Mai mare — valoarea se află în linie Mai mică — valoarea este ascunsă într-un atribut
Valori multiple per element Da Nu, o singură legătură
Legare unică Da, cu {{::value}} Da, cu ng-bind="::value"

Apariția scurtă a acoladelor brute este cunoscută sub numele de „blind of uninterpolated content” (fulger de conținut neinterpolat) și se întâmplă deoarece browserul redă markup-ul înainte ca AngularJS să îl compileze. Folosește ng-bind sau adaugă directiva ng-cloak pentru conținutul vizibil deasupra plierii. Acoladele rămân alegerea mai clară și mai ușor de citit oriunde altundeva, în special acolo unde apar mai multe valori în interiorul unui element.

Diferența dintre expresie și $eval

$eval Funcția evaluează expresiile din interiorul controlerului. Expresiile se evaluează în vizualizare, în timp ce $eval se evaluează în codul controlerului.

Acest exemplu folosește $eval pentru a aduna două numere și a plasa rezultatul pe obiectul de domeniu, astfel încât vizualizarea să îl poată afișa.

Diferența dintre expresie și $eval

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

<div ng-app="sampleApp" ng-controller="AngularController">
    <h1>Guru99 Global Event</h1>
    {{value}}
</div>

<script>
    var sampleApp = angular.module('sampleApp', []);
    sampleApp.controller('AngularController', function($scope) {
        $scope.a = 1;
        $scope.b = 1;

        $scope.value = $scope.$eval('a+b');
    });
</script>

</body>
</html>

Code Explicaţie:

  1. Două variabile de domeniu, a și b, fiecare deține valoarea 1.
  2. $scope.$eval evaluează adunarea lor și atribuie rezultatul variabilei de domeniu value.
  3. Vizualizarea se afișează apoi value.

ieșire:

Diferența dintre expresie și $eval

Rezultatul arată expresia evaluată în interiorul controlor, cu suma celor două variabile de domeniu trimisă și afișată în vizualizare.

Întrebări frecvente

Prefixarea unei expresii cu două două puncte, ca în {{::name}}, oprește monitorizarea odată ce o valoare este rezolvată. Aceasta elimină observatorul și reduce costul digestului pe paginile cu multe legături statice.

$eval evaluează imediat un șir de caractere în raport cu un domeniu. $parse returnează o funcție reutilizabilă pentru evaluare repetată. $interpolate gestionează un întreg șir de caractere șablon care conține acolade, în loc de o singură expresie.

Mai ales. AI Instrumentele păstrează acoladele și rescriu filtrele ca pipe-uri, dar variabilele ng-init nu au un echivalent Angular și trebuie mutate manual într-o clasă de componente.

Instrumentele de inteligență artificială scanează șabloanele pentru apeluri de funcții în interiorul legăturilor, care se rulează din nou la fiecare ciclu de digest și sugerează fie stocarea în cache a rezultatului în domeniul de aplicare, fie trecerea la o legare unică.

Evaluarea AngularJS este în mod deliberat permisivă. O proprietate lipsă produce valoarea undefined, care este afișată ca un șir gol, așadar o valoare goală înseamnă de obicei o greșeală de scriere în calea proprietății, mai degrabă decât o eroare de execuție.

Rezumați această postare cu: