Open Source im professionellen Einsatz
Linux-Magazin 02/2014
© antonprado, 123RF.com

© antonprado, 123RF.com

Webanwendungen mit dem Framework Angular JS

Web ohne Knoten

Angular JS ist der aktuelle Shootingstar unter den Webframeworks. Die Javascript-Bibliothek bringt bewährte Konzepte der Rich-Client-Entwicklung in den Browser und entwirrt Ansichten und Daten.

676

Kaum ein anderes Programmierthema ist dermaßen im Fluss wie die Entwicklung von Webanwendungen. Ein klarer Trend der letzten Jahre ist die zunehmende Verlagerung der Anwendung vom Server in den Browser. Triebfeder ist hier vor allem die Verbesserung der Reaktionszeit. Anstelle des klassischen Abrufs ganzer Seiten fragen moderne Single-Page-Anwendungen nur noch Teile der Seite oder Rohdaten vom Server ab und integrieren sie per Javascript in die bestehende Ansicht. Auch das Überprüfen von Nutzereingaben oder das Filtern von Daten findet möglichst im Browser statt. Lohn der Mühe sind schnell reagierende Webanwendungen mit dem Bedienungskomfort nativer Anwendungen.

Gordischer Knoten

Die Entwickler solcher Anwendungen müssen aber oft einen hohen Preis zahlen, schnell sind sie in einen gordischen Knoten aus HTML, Javascript, CSS und Servercode verstrickt. Daher greifen viele auf Javascript-Bibliotheken wie Jquery [1] zurück, im Endeffekt beschäftigen sie sich aber nach wie vor mit der Manipulation des im Browser dargestellten Document Object Model (DOM).

Das MIT-lizenzierte Framework Angular JS [2] verspricht dagegen, den Knoten zu lösen. Das bei Google entwickelte Framework bringt bewährte Konzepte aus der Rich-Client-Entwicklung in den Browser. An die Stelle der aufwändigen und fehlerträchtigen Manipulationen auf Ebene der HTML-Elemente tritt ein sauberes Model-View-Controller-Konzept.

Wie Abbildung 1 zeigt, besteht eine Angular-JS-Webanwendung aus einer Applikation mit einem oder mehreren Controllern. Die Controller sind für die Daten eines Arbeitsbereichs (Scope) im Model zuständig. Applikation, Controller und Model sind in Javascript implementiert. Hier lassen sich normale Javascript-Funktionen und -Variablen verwenden, die Software drängt dem Entwickler keine speziellen Basisklassen auf.

Die Definition der Ansichten basiert auf dem bewährten HTML, dessen Vokabular aber um spezielle Direktiven für das dynamische Verhalten erweitert wird. Diese Anweisungen wertet Angular JS zur Laufzeit aus, eine direkte Manipulation des DOM aus den Controllern ist weder notwendig noch erwünscht.

Abbildung 1: Der Aufbau von Angular-JS-Anwendungen folgt der Architektur Model-View-Controller (MVC).

Flugs eingefügt

Was sich kompliziert anhören mag, führt in der Praxis erstaunlich schnell zum Ergebnis. Die Listings 1 und 2 implementieren eine komplette Webanwendung zum Anlegen und Anzeigen von Kontaktdaten (Abbildung 2). Das erste Listing enthält die Ansicht, die sich erst auf den zweiten Blick von normalem, statischem HTML unterscheidet. Einstiegspunkt ist die Verknüpfung des HTML-Dokuments mit der Angular-JS-Applikation durch die Direktive »ng-app« (Listing 1, Zeile 1). Innerhalb des Dokuments verbindet »ng-controller« einzelne Bereiche mit einem Controller (Listing 1, Zeile 3).

Abbildung 2: Templates und Binding ermöglichen das lokale Bearbeiten von Daten.

Listing 1

HTML-Template für die Webanwendung

01 <html ng-app="LMTemplateAnwendung">
02   <head><meta charset="utf-8"></head>
03   <body ng-controller="BindingCtrl">
04     <h4>{{titel}}</h4>
05     <table border="1">
06       <tr><th>Vorname</th><th>Name</th><th>EMail</th></tr>
07       <tr ng-repeat="kontakt in kontakte">
08         <td>{{kontakt.vorname}}</td>
09         <td>{{kontakt.name}}</td>
10         <td>{{kontakt.email}}</td>
11       </tr>
12     </table>
13     <form ng-submit="neuerKontakt()">
14       Vorname : <input ng-model="editVorname" type="text"><br>
15     Name :    <input ng-model="editName" type="text"><br>
16     EMail :   <input ng-model="editEmail" type="email" >
17     <input type="submit" value="Hinzufügen">
18   </form>
19
20     <script src="../lib/angular.min.js"></script>
21     <script src="js/app.js"></script>
22   </body>
23 </html>

Listing 2

Javascript für die Webanwendung

01 'use strict';
02 angular.module('LMTemplateAnwendung', [])
03   .controller('BindingCtrl', function($scope) {
04     $scope.titel = 'Kontakte';
05     $scope.kontakte = [
06       {id: 1, name: 'Normalverbraucher', vorname: 'Otto', 'email': 'otto.Normalverbraucher@lm.de'},
07       {id: 2, name: 'Mustermann', vorname: 'Erika', 'email': 'erika.mustermann@lm.de'}
08     ];
09     $scope.neuerKontakt = function() {
10       $scope.kontakte.push({name: $scope.editName, vorname: $scope.editVorname, email: $scope.editEmail});
11       $scope.editName = '';
12       $scope.editVorname = '';
13       $scope.editEmail = '';
14     };
15   });

Diesen Artikel als PDF kaufen

Express-Kauf als PDF

Umfang: 4 Heftseiten

Preis € 0,99
(inkl. 19% MwSt.)

Linux-Magazin kaufen

Einzelne Ausgabe
 
Abonnements
 
TABLET & SMARTPHONE APPS
Bald erhältlich
Get it on Google Play

Deutschland

Ähnliche Artikel

  • Mobil-Entwicklung

    Mit dem noch recht jungen Modul Thym landet Apaches Cordova in Eclipse. So gerüstet bauen Sie über einige Befehle, wenige Mausklicks und ein bisschen HTML-5-Code mobile Anwendungen. Unter anderem greift Ihnen dabei das Jboss Developer Studio unter die Arme. Der Workshop verrät, wie es geht.

  • Angular 2

    Mit Typescript statt Javascript, JiT- und AoT-Kompilation und einem konsequenten Einsatz von Components brühen die Macher das Javascript-Framework Angular in Version 2 neu auf. Das Linux-Magazin probiert einen kräftigen Schluck von dem Gebräu.

  • Angular 2 ist fertig

    Nach längerer Entwicklungszeit hat Google in seinem Hauptquartier die finale Version seines Framework für Webanwendungen, Angular 2, veröffentlicht. Das dürfte im Laufe der kommenden Jahre Angular 1 ablösen und fokussiert sich auf Mobilgeräte und moderne Browser.

  • Ruby on Rails

    Das Webframework Ruby on Rails nimmt dem Entwickler viel Arbeit ab und lässt sich doch weitgehend anpassen. In der Beispielanwendung liefert es lediglich die Daten im Json-Format, das Anzeigen im Browser übernimmt die Javascript-Bibliothek Angular.js.

  • Googles Angular arbeitet in Version 1.3.0 schneller

    Googles Javascript-Framework Angular bringt in Version 1.3.0 einige "erwähnenswerte neue Features" mit, reduziert den Speicherverbrauch und verbessert die Performance.

comments powered by Disqus

Ausgabe 10/2017

Digitale Ausgabe: Preis € 6,40
(inkl. 19% MwSt.)

Artikelserien und interessante Workshops aus dem Magazin können Sie hier als Bundle erwerben.