AngularJS-expressies: ARRAY, Objects, $eval, Strings [Voorbeelden]

Wat zijn Angular JS-expressies?

Expressies zijn variabelen die zijn gedefinieerd in de double beugel {{ }}. Ze worden heel vaak gebruikt binnen Angular JS en je zou ze in onze vorige tutorials tegenkomen.

Leg Angular.js-expressies uit met een voorbeeld

AngularJS-expressies zijn de expressies die erin zijn geschreven double accolades {{expressie}}.

Syntax:

Een eenvoudig voorbeeld van een expressie is {{5 + 6}}.

Angular.JS-expressies worden op dezelfde manier gebruikt om gegevens aan HTML te binden als de ng-bind-richtlijn. AngularJS geeft de gegevens precies weer op de plaats waar de expressie is geplaatst.

Laten we eens kijken naar een voorbeeld van Angular.JS-expressies.

In dit voorbeeld willen we alleen een eenvoudige optelling van getallen als uitdrukking weergeven.

Angular.js-expressies

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

Code Verklaring:

  1. De ng-app-richtlijn in ons voorbeeld is leeg, zoals weergegeven in de bovenstaande schermafbeelding. Dit betekent alleen dat er geen module is om controllers toe te wijzen, richtlijnen, diensten die aan de code zijn gekoppeld.
  2. We voegen een eenvoudige uitdrukking toe die kijkt naar de optelling van 2 getallen.

Als de code met succes wordt uitgevoerd, verschijnt het bericht following De uitvoer wordt weergegeven wanneer u uw code in de browser uitvoert.

Output:

Angular.js-expressies

Van de uitvoer,

  • Te zien is dat de optelling van de twee getallen 9 en 6 plaatsvindt en de optelwaarde van 15 wordt weergegeven.

Angular.JS-nummers

Expressies kunnen ook worden gebruikt om met getallen te werken. Laten we eens kijken naar een voorbeeld van Angular.JS-expressies met getallen.

In dit voorbeeld willen we alleen een eenvoudige vermenigvuldiging van twee getalvariabelen weergeven, genaamd marge en winst, en hun vermenigvuldigde waarde weergeven.

Angular.JS-nummers

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

Code Verklaring:

  1. De ng-init-richtlijn wordt in angular.js gebruikt om variabelen en hun corresponderende waarden in de weergave zelf te definiëren. Het lijkt een beetje op het definiëren van lokale variabelen om in een willekeurige variabele te coderen programmeertaal. In dit geval definiëren we twee variabelen, genaamd marge en winst, en wijzen we er waarden aan toe.
  2. Vervolgens gebruiken we de twee lokale variabelen en vermenigvuldigen we hun waarden.

Als de code met succes wordt uitgevoerd, verschijnt het bericht following De uitvoer wordt weergegeven wanneer u uw code in de browser uitvoert.

Output:

Angular.JS-nummers

Van de uitvoer,

  • Duidelijk is te zien dat de vermenigvuldiging van de 2 getallen 2 en 200 plaatsvindt, en de vermenigvuldigde waarde van 400 wordt weergegeven.

AngularJS-reeksen

Expressies kunnen ook worden gebruikt om met tekenreeksen te werken. Laten we eens kijken naar een voorbeeld van Angular JS-expressies met tekenreeksen.

In dit voorbeeld gaan we twee tekenreeksen van “voornaam” en “achternaam” definiëren en deze dienovereenkomstig weergeven met behulp van expressies.

AngularJS-reeksen

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

Code Verklaring:

  1. De ng-init richtlijn wordt gebruikt om de variabelen firstName te definiëren met de waarde “Guru” en de variabele lastName met de waarde “99”.
  2. We gebruiken vervolgens de expressies van {{firstName}} en {{lastName}} om toegang te krijgen tot de waarde van deze variabelen en deze dienovereenkomstig in de weergave weer te geven.

Als de code met succes wordt uitgevoerd, verschijnt het bericht following De uitvoer wordt weergegeven wanneer u uw code in de browser uitvoert.

Output:

AngularJS-reeksen

Uit de uitvoer is duidelijk te zien dat de waarden van firstName en lastName op het scherm worden weergegeven.

Angular.JS-objecten

Er kan met expressies worden gewerkt JavaScript objecten ook.

Laten we een voorbeeld bekijken van Angular.JS-expressies met JavaScript-objecten. Een JavaScript-object bestaat uit een naam-waarde-paar.

Hieronder ziet u een voorbeeld van de syntaxis van een JavaScript-object.

Syntax:

var car = {type:"Ford", model:"Explorer", color:"White"};

In dit voorbeeld gaan we één object definiëren als een persoonsobject dat twee sleutelwaardeparen heeft: 'voornaam' en 'achternaam'.

Angular.JS-objecten

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

Code Verklaring:

  1. De ng-init-richtlijn wordt gebruikt om het object person te definiëren, dat op zijn beurt sleutelwaardeparen heeft van firstName met de waarde "Guru" en de variabele lastName met de waarde "99".
  2. Vervolgens gebruiken we expressies van {{person.firstName}} en {{person.secondName}} om toegang te krijgen tot de waarde van deze variabelen en deze dienovereenkomstig in de weergave weer te geven. Omdat de feitelijke lidvariabelen deel uitmaken van de objectpersoon, moeten ze deze benaderen met de puntnotatie (.) om toegang te krijgen tot hun werkelijke waarde.

Als de code met succes wordt uitgevoerd, verschijnt het bericht following De uitvoer wordt weergegeven wanneer u uw code in de browser uitvoert.

Output:

Angular.JS-objecten

Van de uitvoer,

  • Het is duidelijk te zien dat de waarden van “firstName” en “secondName” op het scherm worden weergegeven.

AngularJS-arrays

Expressies kunnen ook worden gebruikt om met arrays te werken. Laten we eens kijken naar een voorbeeld van Angular JS-expressies met arrays.

In dit voorbeeld gaan we een array definiëren die de cijfers van een student voor 3 vakken bevat. In de weergave zullen we de waarde van deze markeringen dienovereenkomstig weergeven.

AngularJS-arrays

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

Code Verklaring:

  1. De ng-init richtlijn wordt gebruikt om de array met de naam “marks” te definiëren met 3 waarden van 1, 15 en 19.
  2. Vervolgens gebruiken we uitdrukkingen van markeringen [index] om toegang te krijgen tot elk element van de array.

Als de code met succes wordt uitgevoerd, verschijnt het bericht following De uitvoer wordt weergegeven wanneer u uw code in de browser uitvoert.

Output:

AngularJS-arrays

Uit de uitvoer is duidelijk te zien dat de weergegeven markeringen in de array zijn gedefinieerd.

AngularJS Expressiemogelijkheden en beperkingen

Angular.JS-expressiemogelijkheden

  1. Hoekige expressies lijken op JavaScript-expressies. Daarom heeft het dezelfde kracht en flexibiliteit.
  2. Wanneer u in JavaScript ongedefinieerde eigenschappen probeert te evalueren, genereert het een ReferenceError of TypeError. In Angular is de evaluatie van expressies vergevingsgezind en genereert deze een ongedefinieerde waarde of nul.
  3. U kunt filters binnen expressies gebruiken om gegevens op te maken voordat ze worden weergegeven.

Beperkingen van Angular JS-expressie

  1. Er is momenteel geen beschikbaarheid voor het gebruik van conditionele lussen, lussen of uitzonderingen in een Angular-expressie
  2. U kunt geen functies declareren in een Angular-expressie, zelfs niet binnen de ng-init-richtlijn.
  3. U kunt geen reguliere expressies maken in een Angular-expressie. Een reguliere expressie is een combinatie van symbolen en tekens, die worden gebruikt om tekenreeksen zoals .*\.txt$ te vinden. Dergelijke expressies kunnen niet worden gebruikt binnen Angular JS-expressies.
  4. Ook kan men een Angular-uitdrukking niet gebruiken of ongeldig maken.

Verschil tussen expressie en $eval

Met de functie $eval kunt u expressies vanuit de controller zelf evalueren. Dus terwijl expressies worden gebruikt voor evaluatie in de weergave, wordt $eval gebruikt in de controllerfunctie.

Laten we een eenvoudig voorbeeld hiervan bekijken.

In dit voorbeeld

We gaan gewoon de functie $eval gebruiken om 2 getallen toe te voegen en deze beschikbaar te maken in het scope-object, zodat het in de weergave kan worden weergegeven.

Verschil tussen expressie en $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>

Code Verklaring:

  1. We definiëren eerst twee variabelen 'a' en 'b', die elk de waarde 2 hebben.
  2. We gebruiken de functie $scope.$eval om de toevoeging van de twee variabelen te evalueren en deze toe te wijzen aan de scopevariabele 'waarde'.
  3. We tonen dan alleen de waarde van de variabele 'waarde' in de weergave.

Als de code met succes wordt uitgevoerd, verschijnt het bericht following De uitvoer wordt weergegeven wanneer u uw code in de browser uitvoert.

Output:

Verschil tussen expressie en $eval

De bovenstaande uitvoer toont de uitvoer van de expressie die is geëvalueerd in de controleur. De bovenstaande resultaten laten zien dat de $eval-expressie werd gebruikt om de optelling van de twee bereikvariabelen 'a en b' uit te voeren, waarbij het resultaat werd verzonden en weergegeven in de weergave.

Samengevat

  • We hebben gezien hoe uitdrukkingen in Hoekige JS kan worden gebruikt om reguliere JavaScript-achtige uitdrukkingen te evalueren, zoals de eenvoudige toevoeging van getallen.
  • De ng-init-richtlijn kan worden gebruikt om variabelen in-line te definiëren die in de weergave kunnen worden gebruikt.
  • Er kunnen expressies worden gemaakt die werken met primitieve typen zoals tekenreeksen en getallen.
  • Expressies kunnen ook worden gebruikt om met andere typen te werken, zoals JavaScript-objecten en arrays.
  • Expressies in Angular JS hebben een aantal beperkingen, zoals het ontbreken van reguliere expressies of het gebruik van functies, lussen of voorwaardelijke instructies.