AngularJS kifejezések: ARRAY, objektumok, $eval, karakterláncok [Példák]
James Hartman
Mi az Angular JS Expressions?
A kifejezések olyan változók, amelyeket a {{ }} dupla kapcsos zárójelben határoztunk meg. Nagyon gyakran használják őket az Angular JS-ben, és láthatja őket korábbi oktatóanyagainkban.
Magyarázza el az Angular.js kifejezéseket egy példával
Az AngularJS kifejezések azok, amelyek kettős kapcsos zárójelek közé vannak írva {{kifejezés}}.
Syntax:
Egy egyszerű példa egy kifejezésre: {{5 + 6}}.
Az Angular.JS kifejezések az ng-bind direktívával megegyező módon az adatok HTML-hez való kötésére szolgálnak. Az AngularJS pontosan azon a helyen jeleníti meg az adatokat, ahol a kifejezés el van helyezve.
Nézzünk egy példát az Angular.JS kifejezésekre.
Ebben a példában csak egy egyszerű számösszeadást akarunk kifejezésként megjeleníteni.
<!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>
Kód magyarázata:
- Példánkban az ng-app direktíva üres, amint az a fenti képernyőképen látható. Ez csak azt jelenti, hogy nincs modul a vezérlők hozzárendeléséhez, irányelvek, a kódhoz csatolt szolgáltatások.
- Hozzáadunk egy egyszerű kifejezést, amely 2 szám összeadását nézi.
Ha a kód sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.
output:
A kimenetből,
- Látható, hogy a két 9-es és 6-os szám összeadása megtörténik, és megjelenik a 15-ös hozzáadott érték.
Szögletes.JS Numbers
A kifejezések számokkal is használhatók. Nézzünk egy példát a számokkal ellátott Angular.JS kifejezésekre.
Ebben a példában csak 2 számváltozó egyszerű szorzását szeretnénk bemutatni, amelyeket marginnak és profitnak neveznek, és megjelenítjük azok szorzott értékét.
<!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>
Kód magyarázata:
- Az ng-init direktíva az angular.js fájlban a változók és a hozzájuk tartozó értékek meghatározására szolgál magában a nézetben. Kicsit olyan, mintha helyi változókat határoznánk meg a kódoláshoz programozási nyelv. Ebben az esetben 2 változót határozunk meg, amelyeket marginnak és profitnak nevezünk, és értékeket rendelünk hozzájuk.
- Ezután a 2 lokális változót használjuk, és megszorozzuk az értékeket.
Ha a kód sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.
output:
A kimenetből,
- Jól látható, hogy a 2 szám 2 és 200 szorzása megtörténik, és megjelenik a 400-as szorzott érték.
AngularJS húrok
A kifejezések karakterláncokkal is használhatók. Nézzünk egy példát az Angular JS kifejezésekre karakterláncokkal.
Ebben a példában a „firstName” és a „lastName” 2 karakterláncát határozzuk meg, és ennek megfelelő kifejezésekkel jelenítjük meg őket.
<!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>
Kód magyarázata:
- Az ng-init direktíva határozza meg a firstName változókat „Guru” értékkel és a lastName változót „99” értékkel.
- Ezután a {{firstName}} és {{lastName}} kifejezéseket használjuk, hogy hozzáférjünk ezeknek a változóknak az értékéhez, és ennek megfelelően jelenítsük meg őket a nézetben.
Ha a kód sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.
output:
A kimenetből jól látható, hogy a FirstName és LastName értékei megjelennek a képernyőn.
Szögletes.JS objektumok
A kifejezésekkel dolgozhatunk JavaForgatókönyv tárgyakat is.
Nézzünk egy példát az Angular.JS kifejezésekre javascript objektumokkal. A javascript objektumok név-érték párból állnak.
Az alábbiakban egy JavaScript objektum szintaxisának példája látható.
Syntax:
var car = {type:"Ford", model:"Explorer", color:"White"};
Ebben a példában egy objektumot fogunk definiálni személy objektumként, amelynek 2 kulcsértékpárja lesz: „firstName” és „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>
Kód magyarázata:
- Az ng-init direktíva az objektum személy meghatározására szolgál, amelynek viszont kulcsértékpárjai vannak a firstName értéknek „Guru” értékkel és a lastName változónak „99” értékkel.
- Ezután a {{person.firstName}} és {{person.secondName}} kifejezéseket használjuk, hogy hozzáférjünk ezeknek a változóknak az értékéhez, és ennek megfelelően jelenítsük meg őket a nézetben. Mivel a tényleges tagváltozók az objektum személy részét képezik, a pont (.) jelöléssel kell hozzáférniük ahhoz, hogy hozzáférjenek a tényleges értékükhöz.
Ha a kód sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.
output:
A kimenetből,
- Jól látható, hogy a „firstName” és a „secondName” értéke megjelenik a képernyőn.
AngularJS tömbök
A kifejezések tömbökkel is használhatók. Nézzünk egy példát az Angular JS kifejezésekre tömbökkel.
Ebben a példában egy tömböt fogunk definiálni, amely 3 tantárgyból fogja tartani a tanuló jegyeit. A nézetben ennek megfelelően jelenítjük meg ezeknek a jeleknek az értékét.
<!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>
Kód magyarázata:
- Az ng-init direktíva határozza meg a „marks” nevű tömböt 3 1, 15 és 19 értékkel.
- Ezután a jelek [index] kifejezéseit használjuk a tömb egyes elemeinek eléréséhez.
Ha a kód sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.
output:
A kimenetből jól látható, hogy a tömbben definiált jelölések jelennek meg.
AngularJS Expression képességek és korlátok
Angular.JS Expression képességek
- A szögletes kifejezések olyanok, mint JavaSzkript kifejezések. Ezért ugyanolyan ereje és rugalmassága van.
- In JavaScript, amikor nem definiált tulajdonságokat próbál kiértékelni, ReferenceError vagy TypeError hibaüzenetet generál. Az Angularban a kifejezés kiértékelése elnéző, és meghatározatlan vagy nullát generál.
- A kifejezéseken belüli szűrőket használhatjuk az adatok formázására a megjelenítés előtt.
Az Angular JS kifejezés korlátozásai
- Jelenleg nincs lehetőség feltételes feltételek, hurkok vagy kivételek használatára egy szögkifejezésben
- Nem deklarálhat függvényeket egy Angular kifejezésben, még az ng-init direktíván belül sem.
- Szögkifejezésben nem lehet reguláris kifejezéseket létrehozni. A reguláris kifejezés szimbólumok és karakterek kombinációja, amelyek a .*\.txt$-hoz hasonló karakterláncok keresésére szolgálnak. Az ilyen kifejezések nem használhatók az Angular JS kifejezésekben.
- Szögletes kifejezésben sem használható, sem üres.
Különbség a kifejezés és a $eval között
A $eval függvény lehetővé teszi a kifejezések kiértékelését a vezérlőn belülről. Tehát míg a nézetben kifejezéseket használunk az értékeléshez, addig a $eval a vezérlő függvényben.
Nézzünk erre egy egyszerű példát.
Ebben a példában
Csak a $eval függvényt fogjuk használni, hogy hozzáadjunk 2 számot, és elérhetővé tesszük a hatókör objektumban, hogy megjelenhessen a nézetben.
<!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>
Kód magyarázata:
- Először definiálunk 2 „a” és „b” változót, amelyek mindegyikének értéke 1.
- A $scope.$eval függvényt használjuk, hogy kiértékeljük a 2 változó hozzáadását, és hozzárendeljük a 'value' hatókör változóhoz.
- Ekkor csak az 'value' változó értékét jelenítjük meg a nézetben.
Ha a kód sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.
output:
A fenti kimenet a kifejezésben kiértékelt kifejezés kimenetét mutatja ellenőr. A fenti eredmények azt mutatják, hogy a $eval kifejezést használták a 2 hatókörváltozó „a és b” hozzáadására, az eredmény elküldve és a nézetben megjelenítve.
Összegzésként
- Láttuk, hogy milyen kifejezések Szög JS rendszeres értékelésére használható JavaSzkriptszerű kifejezések, mint például a számok egyszerű összeadása.
- Az ng-init direktíva használható a nézetben használható változók soron belüli meghatározására.
- A kifejezések olyan primitív típusokkal is működhetnek, mint a karakterláncok és a számok.
- A kifejezések más típusokkal is használhatók, mint pl JavaScript objektumok és tömbök.
- Az Angular JS-ben lévő kifejezéseknek van néhány korlátozása, például, hogy ne legyenek reguláris kifejezések, vagy ne használjanak függvényeket, ciklusokat vagy feltételes utasításokat.
