AngularJS-expressies: ARRAY, Objects, $eval, Strings [Voorbeelden]
James Hartman
Wat zijn Angular JS-expressies?
Expressies zijn variabelen die zijn gedefinieerd in de dubbele accolades {{ }}. Ze worden veel gebruikt binnen Angular JS en u zult ze zien in onze vorige tutorials.
Leg Angular.js-expressies uit met een voorbeeld
AngularJS-expressies zijn expressies die tussen dubbele accolades {{expression}} worden geschreven.
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 een eenvoudige optelling van getallen weergeven als een expressie.
<!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:
- 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.
- We voegen een eenvoudige uitdrukking toe die kijkt naar de optelling van twee getallen.
Als de code succesvol is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.
Output:
Van de uitvoer,
- Te zien is dat de optelling van de twee getallen 9 en 6 plaatsvindt en dat de optelling van de waarde 15 wordt weergegeven.
Hoekig.JS Numbers
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 een eenvoudige vermenigvuldiging van twee numerieke variabelen, namelijk marge en winst, weergeven en hun vermenigvuldigde waarde weergeven.
<!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:
- 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.
- Vervolgens gebruiken we de twee lokale variabelen en vermenigvuldigen we hun waarden.
Als de code succesvol is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.
Output:
Van de uitvoer,
- Duidelijk is te zien dat de vermenigvuldiging van de twee getallen 2 en 2 plaatsvindt, en dat de vermenigvuldigde waarde 200 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.
<!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>
Code Verklaring:
- 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”.
- 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 succesvol is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.
Output:
Uit de uitvoer blijkt duidelijk 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'.
<!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>
Code Verklaring:
- 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".
- 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 succesvol is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.
Output:
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.
<!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>
Code Verklaring:
- De ng-init richtlijn wordt gebruikt om de array met de naam “marks” te definiëren met 3 waarden van 1, 15 en 19.
- Vervolgens gebruiken we uitdrukkingen van markeringen [index] om toegang te krijgen tot elk element van de array.
Als de code succesvol is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.
Output:
Uit de uitvoer is duidelijk te zien dat de weergegeven markeringen in de matrix zijn gedefinieerd.
AngularJS Expressiemogelijkheden en beperkingen
Angular.JS-expressiemogelijkheden
- Hoekige uitdrukkingen zijn als JavaScriptexpressies. Het heeft dus dezelfde kracht en flexibiliteit.
- In JavaScript, wanneer u probeert undefined properties te evalueren, genereert het een ReferenceError of TypeError. In Angular is expressie-evaluatie vergevingsgezind en genereert een undefined of null.
- U kunt filters binnen expressies gebruiken om gegevens op te maken voordat ze worden weergegeven.
Beperkingen van Angular JS-expressie
- Er is momenteel geen beschikbaarheid voor het gebruik van conditionele lussen, lussen of uitzonderingen in een Angular-expressie
- U kunt geen functies declareren in een Angular-expressie, zelfs niet binnen de ng-init-richtlijn.
- 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.
- 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 de functie $eval gebruiken om 2 getallen op te tellen en deze beschikbaar te maken in het scope-object, zodat ze in de weergave kunnen worden weergegeven.
<!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:
- We definiëren eerst twee variabelen 'a' en 'b', die elk de waarde 2 hebben.
- We gebruiken de functie $scope.$eval om de toevoeging van de twee variabelen te evalueren en deze toe te wijzen aan de scopevariabele 'waarde'.
- We tonen dan alleen de waarde van de variabele 'waarde' in de weergave.
Als de code succesvol is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.
Output:
De bovenstaande uitvoer toont de uitvoer van de expressie die is geëvalueerd in de controleurDe bovenstaande resultaten laten zien dat de $eval-expressie is gebruikt om de optelling van de 2 scope-variabelen 'a en b' uit te voeren, waarbij het resultaat is verzonden en weergegeven in de weergave.
Samenvatting
- We hebben gezien hoe uitdrukkingen in Hoekige JS kan worden gebruikt om regelmatig te evalueren JavaScript-achtige uitdrukkingen, zoals het eenvoudig optellen van getallen.
- De ng-init-richtlijn kan worden gebruikt om variabelen in-line te definiëren die in de weergave kunnen worden gebruikt.
- Expressies kunnen worden gebruikt met primitieve typen, zoals strings en getallen.
- Expressies kunnen ook worden gebruikt om met andere typen te werken, zoals JavaScriptobjecten 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.
