JavaScript-Framework: Einführung in AngularJS

AngularJS ist ein tolles JavaScript-Framework für Web-Apps, das von Google entwickelt wird. Das Open-Source-Projekt adressiert das Problem, dass HTML ursprünglich für statische Seiten entwickelt wurde.

AngularJS verfolgt einen Model-View-Controller-Ansatz (MVC). Die Views werden deklarativ beschrieben, d.h. das normale HTML-Vokabular einfach um einige AngularJS-Attribute erweitert. Kombiniert mit Two-Way-Data-Binding gibt dies eine leicht lesbare und übersichtliche Trennung zwischen Views und Programmcode.

Zahlreiche weitere Features (z.B. Expressions, Filter) runden das Framework ab, von denen ich die interessantesten kurz vorstellen möchte.

Einbindung von AngularJS

Es sind nur 2 Angaben nötig, um AngularJS in eine HTML-Seite einzubauen. Wie bei jedem Framework verlinkt man die JavaScript-Bibliothek. Des Weiteren setzt man das Attribut ng-app. Es dient dazu, dem Framework mitzuteilen, dass dies das Root-Element der Anwendung sein soll (bei Bedarf könnte man AngularJS auch nur für einen Teil der HTML-Seite nutzen).

<script src="angular.js">

Beispiel 1

Angular Expressions und View

In der HTML-Seite können nun Angular Expressions verwendet werden. Es handelt sich um Ausdrücke, die in doppelten geschweiften Klammern stehen, d.h. {{...}}. Diese Ausdrücke werden vom Framework ausgewertet und das entsprechende Ergebnis erscheint im Frontend.

Wie das Beispiel 1 zeigt, bietet diese Funktionalität einen hohen Nutzen. Es lassen zuallererst verschiedenen Darstellungsformen im Frontend erzeugen (z.B. {{1+1}} wird zu 2)

Berechnungen:
 1 + 2 = {{1 + 2}}
String-Operationen: 
Dies ist {{'ein' + ' Satz!'}}
Währung
: {{3*10|currency}}

Richtig interessant wird dies natürlich erst, wenn variable Werte ins Spiel kommen. Konkret bedeutet dies, dass ein Model dargestellt wird, das zuvor jedoch definiert werden muss. Die einfachste Form ein Model zu erzeugen geschieht über ng-model, das bestimmten HTML-Elementen direkt in der View hinzugefügt werden kann. Möchte man den Inhalt des Models an einer anderen Stelle ausgeben, schreibt dieses einfach in eine Angular Expression.

Hallo {{user.name}}! Deine E-Mail-Adresse lautet {{user.email}}.

Beispiel 2

Das folgende Beispiel 2 zeigt, wie man eine View mit Controller erstellen kann. Das Model wird hierbei auch nicht mehr in der View definiert.

Controller

Der Controller wird in eine externe JavaScript-Datei ausgelagert. Man legt fest, für welchen Bereich der Controller in der HTML-Datei zuständig sein soll (in diesem Fall einfach das Body-Element).

  ...
  <script src="meincontroller.js">
  ...


...

Das Basisgerüst des Controllers (meincontroller.js) sieht so aus:

function MeinController(
$scope, $http) {
}

Das Framework liefert mit $scope den Gültigkeitsbereich des Controllers, auf dem man nun arbeiten kann. Zunächst erstellen wir ein Model.

function MeinController
($scope, $http) 
{    
	$scope.users = [
	{"name":
    "Max", alter:
    20},
	{"name":
    "Anna", alter: 
    21},	
	{"name": 
    "Lisa", alter:
    25}		
	];	
}

Model in der View darstellen

Die View kann nun automatisch auf die Daten zugreifen (z.B. Alter von Max: {{users[0].alter}}).

Generell bietet AngularJS übrigens Two-Way-Binding: Die Daten werden z.B. bei einem Texteingabefeld immer synchron gehalten, d.h. eine neue Texteingabe ändert das Model und eine Model-Änderung aktualisiert den Wert im Texteingabefeld.

Ein nützliches Features ist außerdem das Templating, das über ng-repeat aktiviert wird. Man schreibt das HTML-Template genau einmal für einen Datensatz, das Framework rendert dann die komplette Anzahl an Datensätzen ins Frontend.

Alle Personen<
/h4>

  
{{user.name}} ist {{user.alter}} Jahre alt.
  

Alle Personen

• {{user.name}} ist {{user.alter}} Jahre alt.