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.

Angular.js výrazy

<!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:

  1. 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.
  2. 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:

Angular.js výrazy

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.

Angular.JS Numbers

<!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:

  1. 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.
  2. 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:

Angular.JS Numbers

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.

AngularJS řetězce

<!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'">

        &nbsp;&nbsp;&nbsp;
        First Name : {{firstName}}<br>&nbsp;&nbsp;&nbsp;
        last Name : {{lastName}}

    </div>

</body>
</html>

Vysvětlení kódu:

  1. Použitá direktiva ng-init definuje proměnné firstName s hodnotou „Guru“ a proměnnou lastName s hodnotou „99“.
  2. 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:

AngularJS řetězce

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í“.

Objekty Angular.JS

<!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'}">

    &nbsp;&nbsp;&nbsp;
    First Name : {{person.firstName}}<br>&nbsp;&nbsp;&nbsp;
    Last Name : {{person.lastName}}

</div>

</body>
</html>

Vysvětlení kódu:

  1. 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“.
  2. 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:

Objekty Angular.JS

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.

Pole AngularJS

<!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>&nbsp;&nbsp;&nbsp;
    Subject1 : {{marks[0] }}<br>&nbsp;&nbsp;&nbsp;
    Subject2 : {{marks[1] }}<br>&nbsp;&nbsp;&nbsp;
    Subject3 : {{marks[2] }}<br>&nbsp;&nbsp;&nbsp;
</div>

</body>
</html>

Vysvětlení kódu:

  1. Použitá direktiva ng-init definuje pole s názvem „marks“ se 3 hodnotami 1, 15 a 19.
  2. 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:

Pole AngularJS

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

  1. Hranaté výrazy jsou jako JavaSkriptové výrazy. Má tedy stejnou sílu a flexibilitu.
  2. 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.
  3. 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

  1. V současné době není k dispozici použití podmínek, smyček nebo výjimek v úhlovém výrazu
  2. Funkce nemůžete deklarovat ve výrazu Angular, a to ani v direktivě ng-init.
  3. 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.
  4. 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.

Rozdíl mezi výrazem a $eval

<!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:

  1. Nejprve definujeme 2 proměnné „a“ a „b“, z nichž každá má hodnotu 1.
  2. Používáme funkci $scope.$eval k vyhodnocení přidání 2 proměnných a přiřazení k proměnné rozsahu 'value'.
  3. 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:

Rozdíl mezi výrazem a $eval

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.