AngularJS-Ausdrücke: ARRAY, Objekte, $eval, Strings [Beispiele]
James Hartmann
Was sind Angular JS-Ausdrücke?
Ausdrücke sind Variablen, die in doppelten Klammern {{ }} definiert wurden. Sie werden in Angular JS sehr häufig verwendet und Sie haben sie in unseren vorherigen Tutorials gesehen.
Erläutern Sie Angular.js-Ausdrücke anhand eines Beispiels
AngularJS-Ausdrücke sind solche, die in doppelten Klammern {{expression}} geschrieben sind.
Syntax:
Ein einfaches Beispiel für einen Ausdruck ist {{5 + 6}}.
Angular.JS-Ausdrücke werden verwendet, um Daten auf die gleiche Weise wie die ng-bind-Direktive an HTML zu binden. AngularJS zeigt die Daten genau an der Stelle an, an der der Ausdruck platziert ist.
Schauen wir uns ein Beispiel für Angular.JS-Ausdrücke an.
In diesem Beispiel möchten wir nur eine einfache Addition von Zahlen als Ausdruck darstellen.
<!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-Erklärung:
- Die ng-app-Direktive in unserem Beispiel ist leer, wie im obigen Screenshot gezeigt. Dies bedeutet lediglich, dass es kein Modul zum Zuweisen von Controllern gibt. Richtlinien, Dienste, die dem Code beigefügt sind.
- Wir fügen einen einfachen Ausdruck hinzu, der die Addition von zwei Zahlen betrachtet.
Wenn der Code erfolgreich ausgeführt wird, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.
Ausgang:
Aus der Ausgabe,
- Es ist zu erkennen, dass die Addition der beiden Zahlen 9 und 6 stattfindet und der addierte Wert 15 angezeigt wird.
Winkel.JS Numbers
Ausdrücke können auch zum Arbeiten mit Zahlen verwendet werden. Sehen wir uns ein Beispiel für Angular.JS-Ausdrücke mit Zahlen an.
In diesem Beispiel möchten wir nur eine einfache Multiplikation von zwei Zahlenvariablen namens Marge und Gewinn zeigen und ihren multiplizierten Wert anzeigen.
<!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-Erklärung:
- Die ng-init-Direktive wird in angle.js verwendet, um Variablen und ihre entsprechenden Werte in der Ansicht selbst zu definieren. Es ist ein bisschen so, als würde man lokale Variablen für den Code definieren Programmiersprache. In diesem Fall definieren wir zwei Variablen namens Marge und Gewinn und weisen ihnen Werte zu.
- Wir verwenden dann die beiden lokalen Variablen und multiplizieren ihre Werte.
Wenn der Code erfolgreich ausgeführt wird, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.
Ausgang:
Aus der Ausgabe,
- Es ist deutlich zu erkennen, dass die Multiplikation der beiden Zahlen 2 und 2 stattfindet und der multiplizierte Wert 200 angezeigt wird.
AngularJS-Strings
Ausdrücke können auch zum Arbeiten mit Zeichenfolgen verwendet werden. Schauen wir uns ein Beispiel für Angular JS-Ausdrücke mit Strings an.
In diesem Beispiel definieren wir zwei Zeichenfolgen mit „Vorname“ und „Nachname“ und zeigen sie mithilfe entsprechender Ausdrücke an.
<!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-Erklärung:
- Die ng-init-Direktive wird verwendet, um die Variablen „firstName“ mit dem Wert „Guru“ und die Variable „lastName“ mit dem Wert „99“ zu definieren.
- Wir verwenden dann die Ausdrücke {{firstName}} und {{lastName}}, um auf den Wert dieser Variablen zuzugreifen und sie entsprechend in der Ansicht anzuzeigen.
Wenn der Code erfolgreich ausgeführt wird, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.
Ausgang:
Aus der Ausgabe ist deutlich ersichtlich, dass die Werte von Vorname und Nachname auf dem Bildschirm angezeigt werden.
Angular.JS-Objekte
Mit Ausdrücken kann gearbeitet werden JavaSkript auch Objekte.
Schauen wir uns ein Beispiel für Angular.JS-Ausdrücke mit Javascript-Objekten an. Ein Javascript-Objekt besteht aus einem Name-Wert-Paar.
Unten finden Sie ein Beispiel für die Syntax eines Javascript-Objekts.
Syntax:
var car = {type:"Ford", model:"Explorer", color:"White"};
In diesem Beispiel definieren wir ein Objekt als Personenobjekt, das über zwei Schlüsselwertpaare „Vorname“ und „Nachname“ verfügt.
<!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-Erklärung:
- Die ng-init-Direktive wird verwendet, um das Objekt Person zu definieren, das wiederum Schlüsselwertpaare aus „firstName“ mit dem Wert „Guru“ und der Variablen „lastName“ mit dem Wert „99“ hat.
- Wir verwenden dann die Ausdrücke {{person.firstName}} und {{person.secondName}}, um auf den Wert dieser Variablen zuzugreifen und sie entsprechend in der Ansicht anzuzeigen. Da die tatsächlichen Mitgliedsvariablen Teil des Objekts Person sind, müssen sie mit der Punktnotation (.) darauf zugreifen, um auf ihren tatsächlichen Wert zuzugreifen.
Wenn der Code erfolgreich ausgeführt wird, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.
Ausgang:
Aus der Ausgabe,
- Es ist deutlich zu erkennen, dass auf dem Bildschirm die Werte „Vorname“ und „Zweitname“ angezeigt werden.
AngularJS-Arrays
Ausdrücke können auch für die Arbeit mit Arrays verwendet werden. Schauen wir uns ein Beispiel für Angular JS-Ausdrücke mit Arrays an.
In diesem Beispiel definieren wir ein Array, das die Noten eines Schülers in drei Fächern speichert. In der Ansicht zeigen wir den Wert dieser Markierungen entsprechend an.
<!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-Erklärung:
- Die ng-init-Direktive wird verwendet, um das Array mit dem Namen „marks“ mit den drei Werten 3, 1 und 15 zu definieren.
- Wir verwenden dann Ausdrücke von Markierungen [index], um auf jedes Element des Arrays zuzugreifen.
Wenn der Code erfolgreich ausgeführt wird, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.
Ausgang:
Aus der Ausgabe ist deutlich ersichtlich, dass die angezeigten Markierungen im Array definiert sind.
Funktionen und Einschränkungen des AngularJS-Ausdrucks
Angular.JS-Ausdrucksfunktionen
- Angular-Ausdrücke sind wie JavaSkriptausdrücke. Daher verfügt es über die gleiche Leistung und Flexibilität.
- In JavaWenn Sie versuchen, undefinierte Eigenschaften auszuwerten, generiert das Skript einen ReferenceError oder TypeError. In Angular ist die Auswertung von Ausdrücken nachsichtig und generiert ein „undefiniertes“ oder „null“.
- Man kann Filter innerhalb von Ausdrücken verwenden, um Daten vor der Anzeige zu formatieren.
Einschränkungen des Angular JS-Ausdrucks
- Derzeit ist die Verwendung von Bedingungen, Schleifen oder Ausnahmen in einem Angular-Ausdruck nicht möglich
- Sie können keine Funktionen in einem Angular-Ausdruck deklarieren, auch nicht innerhalb der ng-init-Direktive.
- In einem Angular-Ausdruck können keine regulären Ausdrücke erstellt werden. Ein regulärer Ausdruck ist eine Kombination aus Symbolen und Zeichen, die zum Suchen nach Zeichenfolgen wie .*\.txt$ verwendet werden. Solche Ausdrücke können nicht innerhalb von Angular JS-Ausdrücken verwendet werden.
- Außerdem kann man in einem Angular-Ausdruck nicht „oder void“ verwenden.
Unterschied zwischen Ausdruck und $eval
Mit der Funktion $eval können Ausdrücke innerhalb des Controllers selbst ausgewertet werden. Während also Ausdrücke zur Auswertung in der Ansicht verwendet werden, wird $eval in der Controller-Funktion verwendet.
Schauen wir uns dazu ein einfaches Beispiel an.
In diesem Beispiel
Wir verwenden einfach die Funktion $eval, um zwei Zahlen hinzuzufügen und sie im Scope-Objekt verfügbar zu machen, sodass sie in der Ansicht angezeigt werden können.
<!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-Erklärung:
- Wir definieren zunächst zwei Variablen „a“ und „b“, die jeweils den Wert 2 enthalten.
- Wir verwenden die Funktion $scope.$eval, um die Addition der beiden Variablen auszuwerten und sie der Bereichsvariablen „Wert“ zuzuweisen.
- Wir zeigen dann lediglich den Wert der Variablen „value“ in der Ansicht an.
Wenn der Code erfolgreich ausgeführt wird, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.
Ausgang:
Die obige Ausgabe zeigt die Ausgabe des Ausdrucks, der im ausgewertet wurde Controller. Die obigen Ergebnisse zeigen, dass der Ausdruck $eval verwendet wurde, um die Addition der beiden Bereichsvariablen „a und b“ durchzuführen, wobei das Ergebnis gesendet und in der Ansicht angezeigt wurde.
Zusammenfassung
- Wir haben gesehen, wie Ausdrücke in Angular JS kann zur Bewertung regelmäßiger JavaSkriptähnliche Ausdrücke, beispielsweise die einfache Addition von Zahlen.
- Mit der ng-init-Direktive können Variablen inline definiert werden, die in der Ansicht verwendet werden können.
- Ausdrücke können so erstellt werden, dass sie mit primitiven Typen wie Zeichenfolgen und Zahlen funktionieren.
- Ausdrücke können auch verwendet werden, um mit anderen Typen zu arbeiten, wie zum Beispiel JavaSkriptobjekte und Arrays.
- Ausdrücke in Angular JS unterliegen einigen Einschränkungen, z. B. dürfen keine regulären Ausdrücke vorhanden sein oder Funktionen, Schleifen oder bedingte Anweisungen verwendet werden.
