AngularJS výrazy: ARRAY, Objects, $eval, Strings [Příklady]
Co je to Angular JS Expressions?
Výrazy jsou proměnné, které byly definovány ve dvojitých závorkách {{ }}. Jsou velmi běžně používané v Angular JS a viděli byste je v našich předchozích tutoriálech.
Vysvětlete výrazy Angular.js na příkladu
Výrazy AngularJS jsou ty, které jsou zapsány ve dvojitých závorkách {{výraz}}.
Syntaxe:
Jednoduchý příklad výrazu je {{5 + 6}}.
Výrazy Angular.JS se používají k navázání dat na HTML stejným způsobem jako direktiva ng-bind. AngularJS zobrazuje data přesně na místě, kde je výraz umístěn.
Podívejme se na příklad výrazů Angular.JS.
V tomto příkladu chceme pouze ukázat jednoduché sčítání čísel jako výraz.
<!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>
Vysvětlení kódu:
- Direktiva ng-app v našem příkladu je prázdná, jak je znázorněno na obrázku výše. To pouze znamená, že neexistuje žádný modul pro přiřazení ovladačů, směrnice, služby připojené ke kódu.
- Přidáváme jednoduchý výraz, který se dívá na sčítání 2 čísel.
Pokud je kód úspěšně spuštěn, při spuštění kódu v prohlížeči se zobrazí následující výstup.
Výstup:
Z výstupu,
- Je vidět, že dojde k sečtení dvou čísel 9 a 6 a zobrazí se přidaná hodnota 15.
Angular.JS Numbers
Výrazy lze použít i pro práci s čísly. Podívejme se na příklad výrazů Angular.JS s čísly.
V tomto příkladu chceme pouze ukázat jednoduché vynásobení 2 číselných proměnných nazvaných marže a zisk a zobrazit jejich vynásobenou hodnotu.
<!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>
Vysvětlení kódu:
- Direktiva ng-init se v angular.js používá k definování proměnných a jejich odpovídajících hodnot v samotném pohledu. Je to něco jako definování lokálních proměnných pro kódování v libovolném programovací jazyk. V tomto případě definujeme 2 proměnné zvané marže a zisk a přiřazujeme jim hodnoty.
- Potom použijeme 2 lokální proměnné a vynásobíme jejich hodnoty.
Pokud je kód úspěšně spuštěn, při spuštění kódu v prohlížeči se zobrazí následující výstup.
Výstup:
Z výstupu,
- Je jasně vidět, že dojde k vynásobení 2 čísel 2 a 200 a zobrazí se vynásobená hodnota 400.
AngularJS řetězce
Výrazy lze použít i pro práci s řetězci. Podívejme se na příklad Angular JS výrazů s řetězci.
V tomto příkladu definujeme 2 řetězce „křestní jméno“ a „příjmení“ a zobrazíme je pomocí výrazů podle toho.
<!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>
Vysvětlení kódu:
- Použitá direktiva ng-init definuje proměnné firstName s hodnotou „Guru“ a proměnnou lastName s hodnotou „99“.
- Potom používáme výrazy {{firstName}} a {{lastName}} pro přístup k hodnotě těchto proměnných a odpovídajícím způsobem je zobrazíme v zobrazení.
Pokud je kód úspěšně spuštěn, při spuštění kódu v prohlížeči se zobrazí následující výstup.
Výstup:
Z výstupu je jasně vidět, že na obrazovce jsou zobrazeny hodnoty firstName a lastName.
Objekty Angular.JS
S výrazy lze pracovat JavaScénář předměty také.
Podívejme se na příklad výrazů Angular.JS s objekty javascriptu. Objekt javascript se skládá z páru název-hodnota.
Níže je uveden příklad syntaxe javascriptového objektu.
Syntaxe:
var car = {type:"Ford", model:"Explorer", color:"White"};
V tomto příkladu budeme definovat jeden objekt jako objekt osoby, který bude mít 2 páry klíč-hodnota „jméno“ a „příjmení“.
<!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>
Vysvětlení kódu:
- Direktiva ng-init se používá k definování osoby objektu, která má páry klíč-hodnota jméno s hodnotou „Guru“ a proměnná příjmení s hodnotou „99“.
- Potom používáme výrazy {{person.firstName}} a {{person.secondName}} pro přístup k hodnotě těchto proměnných a odpovídajícím způsobem je zobrazíme v zobrazení. Vzhledem k tomu, že skutečné členské proměnné jsou součástí osoby objektu, musí k nim přistupovat pomocí notace s tečkou (.), aby získaly přístup ke své skutečné hodnotě.
Pokud je kód úspěšně spuštěn, při spuštění kódu v prohlížeči se zobrazí následující výstup.
Výstup:
Z výstupu,
- Je jasně vidět, že hodnoty „firstName“ a „secondName“ jsou zobrazeny na obrazovce.
Pole AngularJS
Výrazy lze použít i pro práci s poli. Podívejme se na příklad Angular JS výrazů s poli.
V tomto příkladu budeme definovat pole, které bude obsahovat známky studenta ve 3 předmětech. V pohledu podle toho zobrazíme hodnotu těchto známek.
<!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>
Vysvětlení kódu:
- Použitá direktiva ng-init definuje pole s názvem „marks“ se 3 hodnotami 1, 15 a 19.
- Pro přístup ke každému prvku pole pak používáme výrazy značek [index].
Pokud je kód úspěšně spuštěn, při spuštění kódu v prohlížeči se zobrazí následující výstup.
Výstup:
Z výstupu je jasně vidět, že zobrazené značky jsou definovány v poli.
Možnosti a omezení AngularJS Expression
Angular.JS Expression schopnosti
- Hranaté výrazy jsou jako JavaSkriptové výrazy. Má tedy stejnou sílu a flexibilitu.
- In JavaSkript, když se pokusíte vyhodnotit nedefinované vlastnosti, vygeneruje ReferenceError nebo TypeError. V Angular je vyhodnocení výrazu shovívavé a generuje nedefinovaný nebo null.
- Je možné použít filtry ve výrazech k formátování dat před jejich zobrazením.
Omezení úhlového výrazu JS
- V současné době není k dispozici použití podmínek, smyček nebo výjimek v úhlovém výrazu
- Funkce nemůžete deklarovat ve výrazu Angular, a to ani v direktivě ng-init.
- V úhlovém výrazu nelze vytvářet regulární výrazy. Regulární výraz je kombinací symbolů a znaků, které se používají k vyhledání řetězců, jako je .*\.txt$. Takové výrazy nelze použít ve výrazech Angular JS.
- V Angular výrazu také nelze použít nebo zrušit.
Rozdíl mezi výrazem a $eval
Funkce $eval umožňuje vyhodnocovat výrazy ze samotného ovladače. Takže zatímco výrazy se používají pro vyhodnocení v pohledu, $eval se používá ve funkci kontroleru.
Podívejme se na to na jednoduchý příklad.
V tomto příkladu
Právě použijeme funkci $eval k přidání 2 čísel a zpřístupníme je v objektu scope, aby bylo možné je zobrazit v pohledu.
<!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>
Vysvětlení kódu:
- Nejprve definujeme 2 proměnné „a“ a „b“, z nichž každá má hodnotu 1.
- Používáme funkci $scope.$eval k vyhodnocení přidání 2 proměnných a přiřazení k proměnné rozsahu 'value'.
- V pohledu pak pouze zobrazujeme hodnotu proměnné 'value'.
Pokud je kód úspěšně spuštěn, při spuštění kódu v prohlížeči se zobrazí následující výstup.
Výstup:
Výše uvedený výstup ukazuje výstup výrazu, který byl vyhodnocen v kontrolor. Výše uvedené výsledky ukazují, že výraz $eval byl použit k provedení přidání 2 proměnných rozsahu 'aab' s výsledkem odeslaným a zobrazeným v pohledu.
Shrnutí
- Viděli jsme, jak výrazy v ANGULAR JS lze použít k vyhodnocení pravidelných JavaVýrazy podobné skriptu, jako je jednoduché sčítání čísel.
- Direktivu ng-init lze použít k definování proměnných in-line, které lze použít v pohledu.
- Výrazy lze vytvořit pro práci s primitivními typy, jako jsou řetězce a čísla.
- Výrazy lze použít i pro práci s jinými typy jako např JavaSkriptovací objekty a pole.
- Výrazy v Angular JS mají několik omezení, jako například nemít regulární výrazy nebo používat funkce, smyčky nebo podmíněné příkazy.