AngularJS výrazy: ARRAY, Objects, $eval, Strings [Příklady]
James Hartman
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.
