Sep01
AngularJS – next generation Java Script

AngularJS ist ein JavaScript Framework, das eine ganz andere Qualität als die bisherigen JavaScript Frameworks darstellt und durch aus Enterprise ready ist. Im Folgenden möchte ich einen kurzen Blick darauf werfen.

Übersicht

AngularJS ist nicht einfach nur ein weiteres Framework mit dem man das DOM der HTML Seite manipulieren kann. Es ist ein komplettes Framework zur Entwicklung von Single Page Web Applications mit einer klaren und sauberen Trennung zwischen Model, View und Controller. Mit AngularJS benötigt man kein servereitiges UI Framework wie JSF, es können reinrassige JavaScript Clients gebaut werden, die auf REST Services zugreifen.
Ich werde AngularJS nicht im Detail, sondern nur meine persönlichen Highlights vorstellen und am Ende in einem Praxis Beispiel mit Code zeigen. Für einen detaillierteren Einstieg möchte ich auf das Tutorial von Sascha Brink verweisen.

Hightlights

Struktur

AngularJS ermöglicht, man kann fast sagen erzwingt, eine klare Struktur des Codes. Zum einen erfolgt eine Aufteilung in Module, die auch als Bibliotheken wieder verwendet werden können. Zum anderen wird in View, Controller und Services unterteilt. Die HTML Seite stellt die View dar. Hier wird nur das Layout implementiert, aber keine Logik. Die HTML Seite verwendet Daten des Model und Funktionen, die von Controllern bereit gestellt werden. Dabei gibt es eine Zuteilung von View zu einem Controller. Die Services stellen übergreifende Funktionalitäten bereit, die von verschiedenen Controllern genutzt werden können.
Diese Struktur wird vom Framework vorgegeben und führt zu einem sauberen und verständlichen Code.

Scoping

Ein weiterer Aspekt ist das Scoping von Variablen und Funktionen. Diese sind nur im Controller oder Service sichtbar, in dem sie definiert wurden. Sollen sie außerhalb sichtbar sein, muss das explizit angegeben werden. Man muss nicht mehr selbst über Closures für das Verstecken sorgen. Das Scoping geht sogar so weit, dass in einer HTML Seite in verschiedenen div-Elementen verschiedener Controller verwendet werden können. Die Attribute und Funktionen der Controller sind nur in den jeweiligen div-Elementen sichtbar.

2-Wege Binding

Das absolute Highlight ist das 2-Wege Binding zwischen Daten des Model und HTML-Elementen der View. Ändern sich die Daten im Model sieht man das sofort auf der HTML-Seite, ändern sich die Daten in der View, z.B. in einem Eingabefeld, werden sie sofort im Model im Controller aktualisiert. Das Ganze funktioniert, ohne dass man den Browser aktualisieren oder ein Formular abschicken muss.

Dazu ein kleines Beispiel.
Folgender HTML-Code zeigt 2 Eingabefelder zahl1 und zahl2. Diese sind mit der AngularJS Anweisung ng-model mit den Model-Attributen zahl1 und zahl2 gebunden.
In Zeile 3 werden die beiden Zahlen ausgegeben und das Ergebnis der Addition der beiden Zahlen. Dazu wird die Funktion addiere() des Controller aufgerufen.

<input type="number" id="zahl1" ng-model="zahl1" />
<input type="number" id="zahl2" ng-model="zahl2" />
Addition von {{zahl1}} und {{zahl2}} ist {{addiere()}}

Der Controller sieht wie folgt aus.

angular.module('Add', [])

.controller('AddCtrl', function($scope) {

   $scope.zahl1 = 0;
   $scope.zahl2 = 0;

   $scope.addiere = function() {
       return parseInt($scope.zahl1) + parseInt($scope.zahl2);
   }
});

In Zeile 1 wird ein Modul mit dem Namen Add definiert.
In Zeile 3 wird der controller mit dem Namen AddCtrl definiert. In ihm werden die Attribute zahl1 und zahl2 als Scope-Variablen festgelegt. Dadurch kann über ng-model und der {{}}-Anweisung aus der HTML-Seite auf diese zugegriffen werden. Die Funktion zum addieren wird ebenfalls in den Scope gelegt.

Ergebnis ist, dass, sobald man die Zahlen in den Eingabefeldern ändert, sich sofort die Ausgabe ändert. Man muss keinen Submit-Button oder sonst etwas drücken. Das nenne ich mal reactive.
Die Demo direkt ausprobieren.
Der Code steht bei GitHub zur Verfügung.

Test und CSS

Eine weitere Besonderheit von AngularJS ist die Testbarkeit des Codes. Es können Unit-Tests angelegt und durchgeführt werden. Dies ist ein wichtiger Aspekt für den Enterprise Einsatz.

Zum Schluss möchte ich noch erwähnen, dass man AngularJS wunderbar mit den CSS Frameworks Bootstrap oder Material Design Lite kombinieren kann. Damit kann man sehr schnell und einfach ansehnliche Web Anwendungen entwickeln.

Praxisbeispiel

Zum Schluss noch eine Demo mit der Kontakte angelegt werden können. In dieser Demo kommt Bootstrap zum Einsatz.

Ein Service speichert die Kontakte. Er bietet Methoden zum Lesen der Kontakte, sowie hinzufügen und löschen eines Kontaktes. In diesem Service könnten die Kontakte, z.B. über einen REST-Service, in einem Back End gespeichert werden.

.factory('ContactService', function() {
	var contacts = [];

	return {
		getContacts: function() {
			return contacts;
		},
		addContact: function(contact) {
			contacts.push(contact);
		},
		removeContact: function(index) {
			contacts.splice(index, 1);
		}
	};
})

Ein Controller ist für die Anzeige und das Löschen von Kontakten zuständig. Der Controller verwendet den ContactService. Im Scope wird die Liste der Kontakte und eine Funktion zum löschen bekannt gemacht.

.controller('ContactListCtrl', function($scope, ContactService) {
	$scope.contacts = ContactService.getContacts();

	$scope.remove = function(index) {
		ContactService.removeContact(index);
	}

})

In der View werden die Kontakte als Liste angezeigt, jeweils mit einem Lösch-Button. Dazu wird die ng-repeat Anweisung verwendet. Zusätzlich wird die Möglichkeit geboten die Liste zu Filtern. Mit ng-show und ng-hide werden Meldungen angezeigt, je nachdem, ob es schon Kontakte in der Liste gibt oder nicht.

<div ng-controller="ContactListCtrl">
	<div class="alert alert-info" ng-hide="contacts.length"><span class="glyphicon glyphicon-info-sign"></span> Sie haben noch keine Kontakte!</div>
	<div ng-show="contacts.length">Anzahl Kontakte <span class="badge">{{contacts.length}}</span> <input type="text" ng-model="search" placeholder="Filter"/></div>
	<table class="table table-hover" ng-show="contacts.length">
		<tr ng-repeat="contact in contacts | filter:search" class="contact-item">
			<td>{{contact.name}}</td>
			<td>{{contact.email}}</td>
			<td><a href class="btn btn-default btn-sm" ng-click="remove($index)"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</a>
		</tr>
	</table>
</div>

Der Controller zum Kontakte anlegen stellt im Scope eine add-Methode zum hinzufügen von Kontakten bereit. Diese verwendet den ContactService. Die Eingaben im Formular werden durch AngularJS validiert. Die Zeilen 10 und 11 dienen dazu das Formular wieder in den Ausgangszustand zurück zu setzen und den Fehlerstatus zu beenden. Das und die Zeile 12 werden benötigt, damit nach erfolgreichem hinzufügen keine Fehlermeldungen mehr angezeigt werden.

.controller('ContactEditCtrl', function($scope, $timeout, ContactService) {

	$scope.add = function(contact) {
		$scope.submitted = true;
		$scope.messages = null;

		if ($scope.editForm.$valid) {
			ContactService.addContact(angular.copy(contact));
			$scope.contact = {};
			$scope.editForm.$setPristine();
			$scope.editForm.$setUntouched();
			$scope.submitted = false;
			$scope.messages = 'Kontakt angelegt.';
		}
		document.getElementById('nameInput').focus();
		// Hide status messages after three seconds.
    $timeout(function() {
      $scope.messages = null;
    }, 3000);
	};

})

Die dazu gehörende View stellt das Eingabeformular dar und zeigt Fehler- und Success-Meldungen an.

<div ng-controller="ContactEditCtrl">
	<form name="editForm" novalidate>
	<input type="text" id="nameInput" name="nameInput" ng-model="contact.name" placeholder="Name" required />
	<input type="email" id="emailInput" name="emailInput" ng-model="contact.email" placeholder="E-Mail" />
	<button type="submit" class="btn btn-default btn-sm" ng-click="add(contact)"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add</button>
	</form>
	<div ng-show="submitted && editForm.nameInput.$error.required" class="alert alert-danger" role="alert"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> Name erforderlich.</div>
	<div ng-show="submitted && editForm.emailInput.$error.email" class="alert alert-danger" role="alert"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> E-Mail falsch.</div>
	<div ng-show="messages" class="alert alert-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> {{messages}}</span></div>
</div>

Hier noch mal der Link zur Demo. Der Code steht bei GitHub zur Verfügung.

Fazit

AngularJS ist ein Framework, mit dem man schnell und einfach Single Page Web Applications entwickeln kann. Insbesondere durch das 2-Wege Binding können mit wenig Code reactive Oberflächen entwickelt werden. Die Nachhaltigkeit bleibt, durch Testbarkeit und Struktur, dabei nicht auf der Strecke.

Es lohnt sich in AngularJS einzusteigen.

2 Kommentare zu “
Sep01
AngularJS – next generation Java Script

  1. Ein weiterer Meilenstein im Verständnis von AngularJS (NG) war für mich die Dependency Injection. Damit NG Veränderungen an Variablen bemerkt ist es erforderlich Services via Dependency Injection zu initiieren.

    Schön zu sehen in Marcos Beispiel:

    .controller(‚ContactListCtrl‘, function($scope, ContactService) {
    $scope.contacts = ContactService.getContacts();

    $scope.remove = function(index) {
    ContactService.removeContact(index);
    }

    })

    Der ContactService und der $scope Service wird als Eingabeparameter des Controllers angegeben, d.h. von NG injiziert.

    Andere Arten der Initiierung sind nicht zulässig, bzw. sorgen für ungewollte Laufzeiteffekte.

    https://docs.angularjs.org/guide/di

  2. Pingback: Microservices mit Spring-Boot | discoveration

Schreibe einen Kommentar

Anmelden um einen Kommentar abzugeben.

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*