HTML5 Mobile

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 im Beispiel 2 zu sehen, 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.

Was haltet ihr davon?

Downloads und Links
Download: Beispiele 1 und 2 (.zip)
Link: angularjs.org

15 Kommentare zu: JavaScript-Framework: Einführung in AngularJS

Arjen
30. Mai 2012, 19:37

Vielen Dank für die Einführung in AngularJS!

Leider funktioniert der Downloadlink nicht, ein Teil der Linkadresse ist doppelt.

Viele Grüsse, Arjen

flo
31. Mai 2012, 21:16

Danke für den Hinweis. Ist korrigiert.

Dennis
11. Juni 2012, 19:27

Vielen dank fuer diese sehr deutliche einfuehrung!

Gruss,
Dennis

Konrad
4. Juli 2012, 10:51

Danke. Sehr gute Einführung. Mein nächstes Projekt werde ich mal mit angularJS machen.

rookie
17. Juli 2012, 04:29

Ach, tut das gut. Endlich mal was auf deutsch zu AngularJS und endlich eine Seite, die auf dem 27er iMac Spaß macht. Ganz nach dem Gedanken, TV First.

Danke Flo!

Florian
8. September 2012, 19:01

Hallo!
Ich habe eine Frage:
Ich möchte mittels {{Klicker}} einen HTML-Code einfügen, der auch ein ng-click dabei hat. Beispiel: hier klicken. Nun ist es aber leider nicht möglich, mittels {{ }} einen HTML-Code einzufügen, sondern nur Werte. Jetzt habe ich es mit üblichem Javascript (mit .innerHTML()) versucht. Jedoch weiß ich nicht, wie man hier die die $scope.ausgabe() aufruft. Hast du eine Lösung?
Lösung bitte per Mail schicken! Danke!!

Florian
8. September 2012, 19:04

Hallo!
Ich habe eine Frage:
Ich möchte mittels {{Klicker}} einen HTML-Code einfügen, der auch ein ng-click dabei hat. Beispiel: %lt;div ng-click=ausgabe(‚dynmaisches Wort‘)>hier klicken</div>. Nun ist es aber leider nicht möglich, mittels {{ }} einen HTML-Code einzufügen, sondern nur Werte. Jetzt habe ich es mit üblichem Javascript (mit .innerHTML()) versucht. Jedoch weiß ich nicht, wie man hier die die $scope.ausgabe() aufruft. Hast du eine Lösung?
Lösung bitte per Mail schicken! Danke!!

Issy
15. September 2012, 01:25

Gute, übersichtliche Einführung. Danke.

Mark
28. September 2012, 16:26

Hallo und Danke für den erstklassigen Artikel, mir erschließen sich jedoch immer noch nicht eindeutig die Vorteile gegenüber jquery. Bitte überzeugen Sie mich, warum ich zu Angular wechseln sollte! 😉
Dankeschön

flo
29. September 2012, 09:12

Generell ist jQuery jetzt nicht unbedingt mit AngularJS zu vergleichen oder gar als Alternative zu sehen.

jQuery ist eine allgemeine JavaScript-Bibliothek für alle denkbaren Einsatzszenarien, während das AngularJS-Framework den MVC-Ansatz verfolgt und somit insbesondere für Web-Apps sinnvoll ist.

mimikri
5. August 2013, 19:01

dankeschön. sehr gut geschrieben und aufgeteilt, nicht zu viel… eine perfekte einführung.

Johanna Gaßmann
16. Mai 2014, 10:04

Vielen Dank Flo, das ist ein wirklich gut zusammengefasstes Tutorial für AngularJS. Da es momentan nur sehr wenige Tutorials zum Thema AngularJS gibt, haben wir ein sehr ausführliches Tutorial mit praktischen Tipps und interessanten Anwendungsmöglichkeiten in PDF Form erstellt. Es ist stark angelehnt an den englischen Guide von Todd Moto. Das Tutorial verschafft zunächst Grundlegende Einblicke und zeigt dann an einem Beispiel genauere Funktionen und Features:

http://www.flyacts.com/tutorial-angularjs-lernen-an-einem-tag

SeppDepp
28. Mai 2015, 07:12

Was versteht man unter Web-App? Ist damit auch eine normale HTML-Homepage gemeint? Oder ist es nur zum Einsatz von Apple/Android Apps gedacht?

flo
28. Mai 2015, 18:38

Technisch gibt’s keinen Unterschied zu einer HTML-Homepage. Als Web-App bezeichnet landläufig Anwendungen, die mit HTML/JS/CSS gebaut sind (also wie eine Website), jedoch vom Aufbau und den Funktionalitäten eher einen App-Charakter haben.

Schreibe einen Kommentar

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

*

*