'

Sie sind hier : sebastian1012.bplaced.net/ homepage-neu / api / was-ist-angular.php

aaaa5

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).

<html ng-app>
<head>
	...
	<script src="angular.js"></script>
	...
</head>

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.

Dynamische Inhalte, die durch Angular erzeugt werden

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:</em> 1 + 2 = {{1 + 2}}
String-Operationen</em>: Dies ist {{'ein' + ' Satz!'}}
Währung</em>: {{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.

<input type="text" ng-model="user.name" />
<input type="email" ng-model="user.email" />
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.

Data-Bindings (grün) an ein Model und Controller-Aufrufe (blau)

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"></script>
  ...
</head>
<body ng-controller="MeinController">
...

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.

<h4>Alle Personen</h4>
<ul>
  <li ng-repeat="user in users">{{user.name}} ist {{user.alter}} Jahre alt.</li>
</ul>

Die Anzeige lässt sich zudem mit Angular-Filtern verfeinern, so dass nur die Datensätze dargestellt werden, die den Filterkriterien entsprechen. Der Filter filter:25 sucht nach allen Datensätzen, in denen die Zahl 25 vorkommt.

<ul>
  <li ng-repeat="user in users | filter:25">{{user.name}} ist {{user.alter}} Jahre alt.</li>
</ul>

Controller aus der View ansprechen

Es fehlt nur noch die Möglichkeit, von der View eine Funktion im Controller auszulösen. Soll dies z.B. bei einem Klick geschehen, gibt es ein spezielles Attribut ng-click. Darin gibt man einfach die Funktion an (<a ng-click="increase()">...</a>). Die Funktion wird im Controller definiert:

$scope.increase = function() {
  $scope.users[0].alter += 1;
}
 
$scope.decrease = function() {
  $scope.users[0].alter -= 1;
}

Externe JSON-Datei laden

Mit dem integrierten Framework-Service $http können Daten aus einer externen Datei nachgeladen werden. Ebenso wird nach dem Buttonklick die Datei users.json geladen und ersetzt das aktuelle Model.

$scope.loadUsers = function() {
    $http.get('users.json').success(function(data) {
      $scope.users = data;
    });
}

Fazit

Wie dieses einfachen Beispiele zeigen, bietet AngularJS eine großes Potenzial für Web-Apps. Dank Dependendy Injection und deklarativem Ansatz bleiben die Apps übersichtlich und lesbar. Vorteile wie lose Kopplung und Testbarkeit ergeben sich daraus. Wer in der Vergangheit mit Adobe Flex gearbeitet hat, dürfte an AngularJS sicher gefallen finden.

Die obigen Beispiel sollen nur ein Anreiz geben, sie bei Interesse weiter mit AngularJS zu beschäftigen. Das Framework bietet viele weitere Möglichkeiten, die dann jedoch auch mit entsprechendem Einarbeitungsaufwand verbunden sind.