Expresii AngularJS: ARRAY, Objects, $eval, Strings [Exemple]
James Hartman
Ce este Angular JS Expressions?
Expresiile sunt variabile care au fost definite în acolade duble {{ }}. Sunt foarte frecvent utilizate în Angular JS și le-ați vedea în tutorialele noastre anterioare.
Explicați expresiile Angular.js cu un exemplu
Expresiile AngularJS sunt cele care sunt scrise între acolade duble {{expresie}}.
Sintaxă:
Un exemplu simplu de expresie este {{5 + 6}}.
Expresiile Angular.JS sunt folosite pentru a lega date la HTML în același mod ca directiva ng-bind. AngularJS afișează datele exact în locul în care este plasată expresia.
Să ne uităm la un exemplu de expresii Angular.JS.
În acest exemplu, vrem doar să arătăm o simplă adăugare de numere ca expresie.
<!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.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="">
Addition : {{6+9}}
</div>
</body>
</html>
Explicația codului:
- Directiva ng-app din exemplul nostru este goală, așa cum se arată în captura de ecran de mai sus. Aceasta înseamnă doar că nu există niciun modul pentru a atribui controlere, instrucțiuni, servicii atașate codului.
- Adăugăm o expresie simplă care privește adăugarea a 2 numere.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată atunci când rulați codul în browser.
ieșire:
Din ieșire,
- Se poate observa că are loc adunarea celor două numere 9 și 6 și se afișează valoarea adăugată de 15.
Angular.JS Numbers
Expresiile pot fi folosite și pentru a lucra cu numere. Să ne uităm la un exemplu de expresii Angular.JS cu numere.
În acest exemplu, vrem doar să arătăm o simplă multiplicare a 2 variabile numerice numite marjă și profit și să afișăm valoarea lor înmulțită.
<!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.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>
Explicația codului:
- Directiva ng-init este utilizată în angular.js pentru a defini variabilele și valorile lor corespunzătoare în vizualizarea în sine. Este oarecum ca definirea variabilelor locale pentru a codifica în oricare limbaj de programare. În acest caz, definim 2 variabile numite marjă și profit și le atribuim valori.
- Apoi folosim cele 2 variabile locale și le înmulțim valorile.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată atunci când rulați codul în browser.
ieșire:
Din ieșire,
- Se vede clar că are loc înmulțirea celor 2 numere 2 și 200, iar valoarea înmulțită de 400 este afișată.
Șiruri de caractere AngularJS
Expresiile pot fi folosite și pentru a lucra cu șiruri. Să ne uităm la un exemplu de expresii Angular JS cu șiruri.
În acest exemplu, vom defini 2 șiruri de „firstName” și „lastName” și le vom afișa folosind expresii în consecință.
<!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.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>
Explicația codului:
- Directiva ng-init este folosită pentru a defini variabilele firstName cu valoarea „Guru” și variabila lastName cu valoarea „99”.
- Apoi folosim expresii de {{firstName}} și {{lastName}} pentru a accesa valoarea acestor variabile și pentru a le afișa în vizualizare în consecință.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată atunci când rulați codul în browser.
ieșire:
Din rezultat, se poate vedea clar că valorile firstName și lastName sunt afișate pe ecran.
Obiecte Angular.JS
Expresiile pot fi folosite pentru a lucra cu JavaScenariu de asemenea obiectele.
Să ne uităm la 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 obiect persoană care va avea 2 perechi valori cheie „firstName” și „lastName”.
<!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.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>
Explicația codului:
- Directiva ng-init este folosită pentru a defini persoana obiect care, la rândul său, are perechi valori cheie de firstName cu valoarea „Guru” și variabila lastName cu valoarea „99”.
- Apoi, folosim expresii de {{person.firstName}} și {{person.secondName}} pentru a accesa valoarea acestor variabile și pentru a le afișa în vizualizare în consecință. Deoarece variabilele membre efective fac parte din persoana obiect, acestea trebuie să o acceseze cu notația punct (.) pentru a accesa valoarea lor reală.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată atunci când rulați codul în browser.
ieșire:
Din ieșire,
- Se poate observa clar că valorile „firstName” și „secondName” sunt afișate pe ecran.
Matrice AngularJS
Expresiile pot fi folosite și pentru a lucra cu matrice. Să ne uităm la un exemplu de expresii Angular JS cu matrice.
În acest exemplu, vom defini o matrice care va deține notele unui student la 3 materii. În vizualizare, vom afișa valoarea acestor mărci în mod corespunzător.
<!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.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] }}<br>
</div>
</body>
</html>
Explicația codului:
- Directiva ng-init este folosită pentru a defini matricea cu numele „marks” cu 3 valori de 1, 15 și 19.
- Apoi folosim 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ă atunci când rulați codul în browser.
ieșire:
Din ieșire, se poate vedea clar că marcajele afișate, care sunt definite în matrice.
Capacități și limitări AngularJS Expression
Capacitățile de expresie Angular.JS
- Expresiile unghiulare sunt ca JavaExpresii de scenariu. Prin urmare, are aceeași putere și flexibilitate.
- In JavaScript, atunci când încercați să evaluați proprietăți nedefinite, generează o ReferenceError sau TypeError. În Angular, evaluarea expresiei este îngăduitoare și generează un nedefinit sau nul.
- Se pot folosi filtre în expresii pentru a formata datele înainte de a le afișa.
Limitări de expresie JS angular
- În prezent, nu există disponibilitate pentru a utiliza condiționale, bucle sau excepții într-o expresie Angular
- Nu puteți declara funcții într-o expresie unghiulară, chiar și în cadrul directivei ng-init.
- Nu se poate 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 șiruri precum .*\.txt$. Astfel de expresii nu pot fi folosite în expresiile Angular JS.
- De asemenea, nu se poate folosi sau nu poate fi folosită într-o expresie unghiulară.
Diferența dintre expresie și $eval
Funcția $eval permite evaluarea expresiilor din interiorul controlerului însuși. Deci, în timp ce expresiile sunt folosite pentru evaluare în vizualizare, $eval este folosit în funcția de controler.
Să ne uităm la un exemplu simplu în acest sens.
În acest exemplu,
Vom folosi doar funcția $eval pentru a adăuga 2 numere și pentru a le face disponibile în obiectul scope, astfel încât să poată fi afișat în vizualizare.
<!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.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.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>
Explicația codului:
- 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 a o atribui variabilei de domeniu „valoare”.
- Apoi afișăm doar valoarea variabilei „valoare” în vizualizare.
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ă rezultatul expresiei care a fost evaluată în controlor. Rezultatele de mai sus arată că expresia $eval a fost folosită pentru a realiza adăugarea celor 2 variabile de domeniu „a și b” cu rezultatul trimis și afișat în vizualizare.
Rezumat
- Am văzut cum expresiile în JS unghiular poate fi folosit pentru a evalua regulat JavaExpresii asemănătoare scriptului, cum ar fi simpla adăugare de numere.
- Directiva ng-init poate fi folosită 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 folosite și pentru a lucra cu alte tipuri, cum ar fi JavaScript obiecte și matrice.
- Expresiile din Angular JS au câteva limitări, cum ar fi, de exemplu, să nu aibă expresii regulate sau să folosească funcții, bucle sau instrucțiuni condiționate.
