18. Dezember 2024Extended User Action vs. AngularJS App: What are the differences?

Extended User Action vs. AngularJS App

Thomas Hauling

Startseite
/iTWO Insights
/Extended User Action vs. AngularJS App

In diesem Artikel möchte ich die Unterschiede und Gemeinsamkeiten zwischen der ITWO 4.0 Extended User Action und einer entsprechenden AngularJS-Komponente beschreiben. Hierzu erstellen wir ein Formular, das ein Eingabefeld, eine Anzeige des eingegebenen Textes und eine Schaltfläche zum Löschen der Eingabe enthält.

Aufbau der Action bzw. Komponente

Extended User Action

<div>

<h2>Minimale AngularJS-Komponente</h2>

<p>{{ inputText }}</p>

<button ng-click="eraseInput()">Eingabe löschen</button>

</div>

$scope.inputText = '';

$scope.eraseInput = function() {

$scope.inputText = '';

};

AngularJS-Komponente

<!DOCTYPE html>

<head>

<title>Minimal AngularJS-Komponente</title>

</head>

<h2>Minimale AngularJS-Komponente</h2>

<p>{{ inputText }}</p>

<button ng-click="eraseInput()">Eingabe löschen</button>

var app = angular.module('myApp', []);

app.controller('myController', function($scope) {

$scope.inputText = '';

$scope.eraseInput = function() {

$scope.inputText = '';

};

});

</script>

</body>

</html>

Erklärung der AngularJS-Funktionalität

Gemeinsamkeiten

ng-model: Dieses Attribut bindet das Eingabefeld an die Variable inputText im Controller. Jede Änderung im Eingabefeld wird automatisch in inputText gespeichert.
{{ inputText }}: Diese Ausdruckssyntax zeigt den aktuellen Wert der Variable inputText an. Wenn der Benutzer Text in das Eingabefeld eingibt, wird dieser Text hier angezeigt.
ng-click: Dieses Attribut weist der Schaltfläche eine Funktion zu, die beim Klicken ausgeführt wird. In diesem Fall wird die Funktion eraseInput() aufgerufen, die den Wert von inputText auf einen leeren String setzt und somit das Eingabefeld löscht.
Ausschließlich in der App
ng-app: Dieses Attribut definiert das Root-Element der AngularJS-Anwendung. In diesem Fall ist es das <html>-Element mit dem Wert "myApp".
ng-controller: Dieses Attribut weist dem <body>-Element den Controller "myController" zu, der die Logik der Anwendung steuert.

Controller-Logik

Der Controller "myController" wird in der JavaScript-Sektion definiert bzw. wird im "ITWO Framework" im Skript-Eingabeparameter bereitgestellt. Der Controller initialisiert die Variable inputText und definiert die Funktion eraseInput():

$scope: Dieses Objekt verbindet die Daten zwischen der Ansicht (HTML) und dem Controller. Es ermöglicht die Zwei-Wege-Datenbindung, bei der Änderungen in der Ansicht automatisch im Controller reflektiert werden und umgekehrt.
$scope.inputText: Diese Variable speichert den Text, der im Eingabefeld eingegeben wird.
$scope.eraseInput: Diese Funktion setzt den Wert von inputText auf einen leeren String, wodurch das Eingabefeld geleert wird.

Fazit

Struktur und Einbettung:
- ITWO Extended User Action: Der HTML-Code und das Skript sind getrennt. Der HTML-Code wird in einem <div>-Element eingebettet, und das Skript wird separat bereitgestellt. Dies ist typisch für Anwendungen, bei denen die Logik und das Markup getrennt verwaltet werden.
- AngularJS-Komponente: Der HTML-Code und das Skript sind in einer einzigen HTML-Datei integriert. Dies ist eine vollständige, eigenständige HTML-Datei, die die gesamte Anwendung umfasst, einschließlich der Einbindung der AngularJS-Bibliothek.
Initialisierung der AngularJS-Anwendung:
- ITWO Extended User Action: Es gibt keine explizite Initialisierung der AngularJS-Anwendung im HTML-Code, da die Anwendung bereits initialisiert ist und der Controller im Kontext der bestehenden Anwendung verwendet wird.
- AngularJS-Komponente: Die AngularJS-Anwendung wird explizit mit ng-app="myApp" initialisiert, und der Controller wird mit ng-controller="myController" zugewiesen. Dies macht die Komponente eigenständig und vollständig.