Ce este expresiile angulare JS?
Expresiile sunt variabile care au fost definite în paranteze {{}}. Acestea sunt foarte frecvent utilizate în Angular JS și le-ați vedea în tutorialele noastre anterioare.
În acest tutorial, veți învăța-
- Explicați expresiile Angular.js cu un exemplu
- Numere AngularJS
- Corzi AngularJS
- Obiecte AngularJS
- AngularJS Arrays
- Capabilități și limitări ale expresiei AngularJS
- Diferența dintre expresii și $ eval
Explicați expresiile Angular.js cu un exemplu
Expresiile AngularJS sunt cele care sunt scrise în interiorul parantezelor {{expresie}}.
Sintaxă:
Un exemplu simplu de expresie este {{5 + 6}}.
Expresiile Angular.JS sunt utilizate pentru a lega date la HTML în același mod ca directiva ng-bind. AngularJS afișează datele exact la locul unde este plasată expresia.
Să vedem un exemplu de expresii Angular.JS.
În acest exemplu, vrem doar să arătăm o simplă adăugare de numere ca expresie.
Event Registration Guru99 Global Event
Addition : {{6+9}}
Explicatie cod:
- Directiva ng-app din exemplul nostru este goală, așa cum se arată în captura de ecran de mai sus. Acest lucru înseamnă doar că nu există niciun modul care să atribuie controlere, directive, servicii atașate codului.
- Adăugăm o expresie simplă care privește adunarea a 2 numere.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată când rulați codul în browser.
Ieșire:
Din ieșire,
- Se poate vedea că se adaugă cele două numere 9 și 6 și se afișează valoarea adăugată de 15.
Angular.JS Numere
Expresiile pot fi folosite și pentru a lucra cu cifre. Să vedem un exemplu de expresii Angular.JS cu numere.
În acest exemplu, vrem doar să arătăm o multiplicare simplă a 2 variabile numerice numite marjă și profit și să afișăm valoarea lor multiplicată.
Event Registration Guru99 Global Event
Total profit margin{{margin*profit}}
Explicatie cod:
- Directiva ng-init este utilizată în angular.js pentru a defini variabilele și valorile corespunzătoare ale acestora în vizualizare. Este oarecum ca definirea variabilelor locale pentru cod în orice limbaj de programare. În acest caz, definim 2 variabile numite marjă și profit și le atribuim valori.
- Folosim apoi cele 2 variabile locale și le înmulțim valorile.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată când rulați codul în browser.
Ieșire:
Din ieșire,
- Se poate vedea clar că înmulțirea celor 2 numere 2 și 200 are loc, iar valoarea înmulțită de 400 este afișată.
Corzi AngularJS
Expresiile pot fi folosite și pentru a lucra cu șiruri. Să vedem un exemplu de expresii Angular JS cu șiruri.
În acest exemplu, vom defini 2 șiruri de caractere „firstName” și „lastName” și le vom afișa folosind expresii corespunzătoare.
Event Registration Guru99 Global Event
First Name : {{firstName}}
last Name : {{lastName}}
Explicatie cod:
- Directiva ng-init este utilizată pentru a defini variabilele firstName cu valoarea „Guru” și variabila lastName cu valoarea „99”.
- Folosim apoi expresii {{firstName}} și {{lastName}} pentru a accesa valoarea acestor variabile și a le afișa în vizualizare corespunzător.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată când rulați codul în browser.
Ieșire:
Din ieșire, se poate vedea clar că valorile prenumelui și prenumelui sunt afișate pe ecran.
Obiecte Angular.JS
Expresiile pot fi folosite și pentru a lucra cu obiecte JavaScript.
Să vedem un exemplu de expresii Angular.JS cu obiecte javascript. Un obiect javascript constă dintr-o pereche nume-valoare.
Mai jos este un exemplu de sintaxă a unui obiect javascript.
Sintaxă:
var car = {type:"Ford", model:"Explorer", color:"White"};
În acest exemplu, vom defini un obiect ca un obiect persoană care va avea 2 perechi de valori cheie „firstName” și „lastName”.
Event Registration Guru99 Global Event
First Name : {{person.firstName}}
Last Name : {{person.lastName}}
Explicatie cod:
- Directiva ng-init este utilizată pentru a defini persoana obiect care, la rândul său, are perechi de valori cheie firstName cu valoarea „Guru” și variabila lastName cu valoarea „99”.
- Folosim apoi expresii {{person.firstName}} și {{person.secondName}} pentru a accesa valoarea acestor variabile și a le afișa în vizualizare corespunzător. Deoarece variabilele membre reale fac parte din persoana obiect, trebuie să o acceseze cu notația punct (.) Pentru a-și accesa valoarea reală.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată când rulați codul în browser.
Ieșire:
Din ieșire,
- Se poate vedea clar că valorile „firstName” și „secondName” sunt afișate pe ecran.
AngularJS Arrays
Expresiile pot fi folosite și pentru a lucra cu tablouri. Să vedem un exemplu de expresii Angular JS cu tablouri.
În acest exemplu, vom defini o matrice care va deține notele unui student în 3 discipline. În vizualizare, vom afișa valoarea acestor mărci în consecință.
Event Registration Guru99 Global Event
Student Marks
Subject1 : {{marks[0] }}
Subject2 : {{marks[1] }}
Subject3 : {{marks[2] }}
Explicatie cod:
- Se utilizează directiva ng-init pentru a defini matricea cu numele „marks” cu 3 valori de 1, 15 și 19.
- Folosim apoi expresii de mărci [index] pentru a accesa fiecare element al matricei.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată când rulați codul în browser.
Ieșire:
Din ieșire, se vede clar că semnele afișate, care sunt definite în matrice.
Capabilități și limitări ale expresiei AngularJS
Capabilități de exprimare Angular.JS
- Expresiile unghiulare sunt ca expresiile JavaScript. Prin urmare, are aceeași putere și flexibilitate.
- În JavaScript, când încercați să evaluați proprietăți nedefinite, acesta generează un ReferenceError sau TypeError. În Angular, evaluarea expresiei este iertătoare și generează un nedefinit sau nul.
- Se pot folosi filtre în expresii pentru a formata date înainte de a le afișa.
Limitări ale expresiei angulare JS
- În prezent, nu există disponibilitate pentru a utiliza condiționare, bucle sau excepții într-o expresie unghiulară
- Nu puteți declara funcții într-o expresie unghiulară, chiar și în directiva ng-init.
- Nu se pot crea expresii regulate într-o expresie unghiulară. O expresie regulată este o combinație de simboluri și caractere, care sunt folosite pentru a găsi pentru șiruri precum. * \. Txt $. Astfel de expresii nu pot fi utilizate în expresiile Angular JS.
- De asemenea, nu se poate utiliza sau anula o expresie unghiulară.
Diferența dintre expresie și $ eval
Funcția $ eval permite evaluarea expresiilor din interiorul controlerului. Deci, în timp ce expresiile sunt utilizate pentru evaluare în vizualizare, $ eval este utilizat în funcția de controler.
Să vedem un exemplu simplu în acest sens.
În acest exemplu,
Vom folosi doar funcția $ eval pentru a adăuga 2 numere și a o face disponibilă în obiectul scop, astfel încât să poată fi afișată în vizualizare.
Event Registration Guru99 Global Event
{{value}}
Explicatie cod:
- Mai întâi definim 2 variabile „a” și „b”, fiecare având o valoare de 1.
- Folosim funcția $ scope. $ Eval pentru a evalua adăugarea celor 2 variabile și atribuirea variabilei de scop „valoare”.
- Afișăm doar valoarea variabilei „valoare” în vizualizare.
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ă ieșirea expresiei care a fost evaluată în controler. Rezultatele de mai sus arată că expresia $ eval a fost utilizată pentru a efectua adăugarea celor 2 variabile de domeniu „a și b” cu rezultatul trimis și afișat în vizualizare.
Rezumat:
- Am văzut cum expresiile din Angular JS pot fi folosite pentru a evalua JavaScript obișnuit, cum ar fi expresii, cum ar fi adăugarea simplă a numerelor.
- Directiva ng-init poate fi utilizată pentru a defini variabilele în linie care pot fi utilizate în vizualizare.
- Expresiile pot fi făcute să funcționeze cu tipuri primitive, cum ar fi șiruri și numere.
- Expresiile pot fi, de asemenea, folosite pentru a lucra cu alte tipuri, cum ar fi obiecte JavaScript și tablouri.
- Expresiile în Angular JS au câteva limitări, cum ar fi, de exemplu, faptul că nu au expresii regulate sau nu se utilizează funcții, bucle sau declarații condiționale.