Über die Autoren

Philipp Tarasiewicz ist im Web groß geworden und arbeitet als freiberuflicher Technologieberater, Autor, Sprecher und Coach. Seit einigen Jahren hat er sich auf den Bereich Enterprise JavaScript, insbesondere AngularJS, spezialisiert und unterstützt Unternehmen bei der Aus- und Fortbildung ihrer Mitarbeiter wie auch beim Ramp-up neuer Projekte. Gemeinsam mit Sascha Brink und Robin Böhm betreibt er das deutsche Portal zu AngularJS (AngularJS.DE).

Robin Böhm ist leidenschaftlicher Softwareentwickler, Berater und Autor im Bereich der Webtechnologien und speziell zu Enterprise JavaScript. Er beschäftigt sich seit einigen Jahren intensiv mit der Erstellung clientseitiger Webapplikationen und unterstützt Unternehmen sowohl bei der Aus- und Fortbildung von Mitarbeitern als auch bei der Umsetzung von Projekten. Außerdem ist er Mitgründer des Portals AngularJS.DE.

Zu diesem Buch – sowie zu vielen weiteren dpunkt.büchern – können Sie auch das entsprechende E-Book im PDF-Format herunterladen. Werden Sie dazu einfach Mitglied bei dpunkt.plus⁺:

www.dpunkt.de/plus

AngularJS

Eine praktische Einführung in das JavaScript-Framework

Philipp Tarasiewicz

Robin Böhm

Philipp Tarasiewicz

philipp.tarasiewicz@angularjs.de

Robin Böhm

robin.boehm@angularjs.de

Lektorat: René Schönfeldt

Copy Editing: Annette Schwarz, Ditzingen

Satz: Da-TeX, Leipzig

Herstellung: Frank Heidt

Umschlaggestaltung: Helmut Kraus, www.exclam.de

Druck und Bindung: M.P. Media-Print Informationstechnologie GmbH, 33100 Paderborn

Bibliografische Information der Deutschen Nationalbibliothek

Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie;

detaillierte bibliografische Daten sind im Internet über http://dnb.d-nb.de abrufbar.

ISBN

Buch 978-3-86490-154-6

PDF 978-3-86491-517-8

ePub 978-3-86491-518-5

1. Auflage 2014

Copyright © 2014 dpunkt.verlag GmbH

Wieblinger Weg 17

69123 Heidelberg

Die vorliegende Publikation ist urheberrechtlich geschützt. Alle Rechte vorbehalten. Die Verwendung

der Texte und Abbildungen, auch auszugsweise, ist ohne die schriftliche Zustimmung des Verlags urheberrechtswidrig und daher strafbar. Dies gilt insbesondere für die Vervielfältigung, Übersetzung oder die Verwendung in elektronischen Systemen.

Es wird darauf hingewiesen, dass die im Buch verwendeten Soft- und Hardware-Bezeichnungen sowie Markennamen und Produktbezeichnungen der jeweiligen Firmen im Allgemeinen warenzeichen-, marken- oder patentrechtlichem Schutz unterliegen.

Alle Angaben und Programme in diesem Buch wurden mit größter Sorgfalt kontrolliert. Weder Autor noch Verlag können jedoch für Schäden haftbar gemacht werden, die in Zusammenhang mit der Verwendung dieses Buches stehen.

5 4 3 2 1 0

Philipp Tarasiewicz:
Für Thaddeus, Sylwia, Patrick und Laura

Robin Böhm:
Für Heike, Ernst, Kathi, Roswitha und Lisa

Inhaltsverzeichnis

       Vorwort

1       AngularJS Schnellstart

1.1     Zwei-Wege-Datenbindung: Boilerplate-Code war gestern

1.2     Direktiven: Eigene HTML-Elemente und Attribute

1.3     Filter: Formatierte Ausgaben im Handumdrehen

2       Grundlagen und Konzepte des Frameworks

2.1     Leitkonzepte

2.1.1   Model-View-Controller oder Model-View-ViewModel?

2.1.2   Die Zwei-Wege-Datenbindung und Scopes

2.1.3   Inversion of Control und Dependency Injection

2.1.4   Testbarkeit

2.2     Anwendungsbausteine

2.2.1   Module

2.2.2   Controller

2.2.3   Models

2.2.4   Routen

2.2.5   Ansichten, Templates und Expressions

2.2.6   Filter

2.2.7   Services

2.2.8   Direktiven

3       Das BookMonkey-Projekt

3.1     Auf geht’s, ab geht’s: Projekt- und Prozessvorstellung

3.2     Voraussetzungen

3.3     Die Projektumgebung aufsetzen

3.4     Projektstart: Detailansicht eines Buches

3.4.1   Das Template für die Detailansicht mit Expressions

3.4.2   Die ngHref-Direktive

3.4.3   Das Template mit der ngBind- und ngBindTemplate-Direktive

3.4.4   Das Anwendungsmodul definieren

3.4.5   Die erste Route

3.4.6   Ein eigener Scope mit dem BookDetailsCtrl-Controller

3.4.7   Der erste Test

3.5     Listenansicht für Bücher

3.5.1   Als Erstes der Test

3.5.2   Die Infrastruktur für die Listenansicht

3.5.3   Der BookListCtrl-Controller

3.5.4   Die ngRepeat-Direktive: Ausgabe eines Arrays im Template

3.5.5   Der orderBy-Filter: Sortierung festlegen

3.5.6   Der filter-Filter: Daten bequem filtern

3.6     Navigieren innerhalb der Anwendung

3.6.1   Die Standardroute mit $routeProvider.otherwise()

3.6.2   Als Erstes der Test

3.6.3   Navigation mittels Hashbang-URLs

3.6.4   Die ngClick-Direktive: Auf Klick-Events reagieren

3.6.5   Der $location-Service: Interaktionen mit der Adresszeile

3.7     Der erste Service

3.7.1   Als Erstes der Test

3.7.2   Der BookDataService: Datenzugriffe kapseln

3.7.3   Den BookDataService einbinden

3.7.4   Der $routeParams-Service: URL-Parameter auslesen

4       Die Anwendung erweitern

4.1     Der Administrationsbereich

4.1.1   Als Erstes der Test

4.1.2   Die CRUD-Operationen des BookDataService

4.1.3   Die ngShow- und ngHide-Direktive: Inhalte bedingt anzeigen und ausblenden

4.1.4   Formularverarbeitung und Validierung mit dem FormController und NgModelController

4.1.5   Templates mit der ngInclude-Direktive einbinden

4.1.6   Die Funktion zum Editieren eines Buches

4.1.7   Die Funktion zum Löschen eines Buches

4.2     Kategorisierung durch Tags

4.2.1   Das Datenmodell um Tags erweitern

4.2.2   Als Erstes der Test

4.2.3   Die Tokenfield-Direktive: Tags anlegen

4.2.4   Die Tags-Direktive: Tags anzeigen

4.3     Einen REST Web Service anbinden

4.3.1   Das BookMonkey-Backend

4.3.2   HTTP-Kommunikation mit dem $http-Service

4.3.3   Als Erstes der Test

4.3.4   $http im BookDataService nutzen

4.3.5   Die Anwendung wiederinstandsetzen

5       Projektverwaltung und Automatisierung

5.1     Node.js: Die Ablaufumgebung für die Werkzeuge

5.2     Frontend-Abhängigkeiten mit Bower verwalten

5.2.1   Bower konfigurieren

5.2.2   Eigene Pakete mit Bower verwalten

5.2.3   Ein privates Register erstellen

5.2.4   Mögliche Probleme mit Proxy-Servern

5.3     Aufgaben mit Grunt automatisieren

5.3.1   Aufgaben konfigurieren

5.3.2   Sinnvolle Pakete für die Entwicklung

5.4     Tests mit Karma automatisiert ausführen

5.4.1   Konfiguration

5.4.2   Die wichtigsten Parameter

5.4.3   Initiale Karma-Konfiguration generieren

5.4.4   Karma-Erweiterungen nutzen

5.4.5   Tests direkt in WebStorm ausführen

5.4.6   Test-Frameworks

5.4.7   Continuous Integration

5.5     Yeoman: Ein definierter Workflow

5.5.1   Was ist Yeoman?

5.5.2   Yeoman installieren

5.5.3   Anwendungsbausteinen generieren

5.5.4   Yo für AngularJS-Projekte

5.5.5   Generierte Grunt-Konfiguration

6       Debugging

6.1     Chrome Developer Tools

6.1.1   Der Elemente-Tab

6.1.2   Die Konsole

6.1.3   Der Sources-Tab: JavaScript-Code debuggen

6.2     Batarang: Einsicht in die laufende AngularJS-Anwendung

6.2.1   Scopes untersuchen

6.2.2   Ausführungszeiten von Funktionen vermessen

6.2.3   Serviceabhängigkeiten untersuchen

6.3     Die WebStorm-IDE

7       Antworten auf häufig gestellte Fragen

7.1     AngularJS-Module: Wie strukturieren wir Anwendungen mit Modulen?

7.1.1   Module in AngularJS

7.1.2   Wann ist Modularisierung sinnvoll?

7.1.3   Ordnerstruktur

7.2     Promises: Wie gehen wir mit Asynchronität um?

7.2.1   Asynchronität und nichtblockierende Aufrufe

7.2.2   Was sind Promises?

7.2.3   Promises in AngularJS

7.2.4   Promises in AngularJS testen

7.3     AngularJS und RequireJS: Ist diese Kombination sinnvoll?

7.3.1   Was ist RequireJS?

7.3.2   Ein Beispiel mit RequireJS

7.3.3   AngularJS und RequireJS

7.3.4   Testen mit RequireJS

7.3.5   Die Antwort

7.4     Mobile: Unterstützt AngularJS mobile Endgeräte?

7.4.1   Touch-Events unterstützen

7.4.2   Die Swipe-Direktiven

7.4.3   Der $swipe-Service

Index

Vorwort

Framework zur Erstellung clientseitiger Webanwendungen

AngularJS ist ein JavaScript-Framework, das Sie dabei unterstützt, moderne clientseitige Webanwendungen zu erstellen. Durch elegante Konventionen entfällt ein Großteil des Programm-Quellcodes, den Sie sonst benötigen würden, um immer wiederkehrende Standardaufgaben zu lösen. Somit können Sie sich auf die eigentliche Aufgabenstellung konzentrieren.

Dieses Buch führt Sie anhand eines Beispielprojekts schrittweise an die Entwicklung mit AngularJS heran. Sie werden in die grundlegenden KonzepteGrundlegende Konzepte eingeführt, die es Ihnen ermöglichen, strukturierte, modularisierte und somit wartbare Applikationen zu erstellen. Insbesondere erklären die Autoren Konzepte wie Module, Scopes, Services oder Direktiven und zeigen, wie Sie diese effektiv einsetzen können. Ein eigenes Kapitel widmet sich der Anbindung der Applikation an einen REST-basierten Web Service. Außerdem werden die Werkzeuge Bower, Grunt, Karma und Yo vorgestellt, die Ihnen weitere typische Aufgaben während der Entwicklung erleichtern oder sogar komplett abnehmen. Mit YeomanVorstellung der Werkzeuge stellen die Autoren einen definierten Workflow vor, der definiert, wie sich diese Werkzeuge in Kombination einsetzen lassen, um für den Entwickler eine produktive Umgebung zu schaffen. Während der Erstellung dieses Buches haben die Autoren eine große Anzahl von Projekten mit dem Framework AngularJS realisiert und betreut. Viele dieser durch die Erfahrungen in der PraxisPraxistipps entstandenen Erkenntnisse sind in Form von Tipp-Boxen an den entsprechenden Stellen in diesem Buch eingefügt.

Nach dem Lesen der Lektüre sind Sie in der Lage:

zu verstehen, wie Sie die einzelnen Mechanismen von AngularJS geschickt einsetzen kann und wie ihr Zusammenspiel funktioniert.

modularisierte, strukturierte und wartbare clientseitige Web-Applikationen zu entwickeln.

durch den Einsatz von testgetriebenen Entwicklungsmethoden qualitativ hochwertige AngularJS-Applikationen für das Web zu erstellen.

Für wen ist dieses Buch?

Webentwickler mit JavaScript-Erfahrung

Dieses Buch richtet sich in erster Linie an Webentwickler, die bereits erste Applikationen mit JavaScript gebaut haben, ein Grundverständnis für die Sprache erlangt haben und jetzt durch den Einsatz von testgetriebenen Entwicklungsmethoden und Techniken zur Strukturierung und Modularisierung von JavaScript-Code ihre Kenntnisse auf das nächste Level heben möchten. Darüber hinaus ist es von Vorteil, wenn Sie bereits mit jQuery in Berührung gekommen sind. Entsprechende Kenntnisse werden zwar nicht vorausgesetzt, helfen Ihnen aber dabei, nachvollziehen zu können, auf welche Art und Weise Frameworks wie AngularJS die Entwicklung einer JavaScript-Applikation erleichtern.

Was sollte man mitbringen?

Sie benötigen keinerlei AngularJS-Vorkenntnisse,Keinerlei AngularJS-Vorkenntnisse um die vorgestellten Inhalte verstehen zu können. Allerdings erfordern die präsentierten Inhalte ein Grundverständnis von JavaScript. Darüber hinaus sollten Sie sowohl HTML- wie auch CSS-Grundkenntnisse mitbringen. Es ist außerdem von Vorteil, wenn Sie sich bereits mit den grundlegenden Konzepten der testgetriebenen EntwicklungJavaScript-Grundkenntnisse auseinandergesetzt haben.

Für wen ist dieses Buch nicht?

Da ErfahrungenUnerfahrene Webentwickler im Web-Umfeld und speziell in JavaScript erforderlich sind, ist es für jeden Entwickler, der auf diesem Gebiet unerfahren ist, empfehlenswert, sich vor dem Lesen die benötigten Grundlagen zu erarbeiten. Weiterhin sollten Sie es nicht als ReferenzwerkKein Referenzbuch ansehen, in dem Sie alle Antworten zu dem AngularJS-Framework finden werden.

Es werden nicht alle Features und Direktiven von AngularJS behandelt. Anhand eines kleinen Praxisbeispiels werden stattdessen die wichtigsten Merkmale und Konzepte des Frameworks erklärt und im Einsatz gezeigt. Somit sind die präsentierten AngularJS-Inhalte keine große Hilfestellung beim Erstellen großer und komplexer Applikationen. Die präsentierten Werkzeuge und das Kapitel über die häufig gestellten Fragen sprechen jedoch auch Themen an, die für größere Anwendungen relevant sind.

Wie liest man dieses Buch?

Einführung in die Konzepte

Wir beginnen in Kapitel 1 mit einem Schnellstart in das Framework, indem wir anhand kurzer Beispiele einige Kernkonzepte von AngularJS präsentieren. Dieses Kapitel soll in erster Linie die Möglichkeiten und den Mehrwert von AngularJS demonstrieren. Der Leser soll ein Gefühl dafür bekommen, warum es sich lohnt, bei dem nächsten Projekt AngularJS in die engere Auswahl zu nehmen. Jedoch werden wir die Hintergründe der behandelten Beispiele nicht ausführlich beleuchten. Sie sollten dieses Kapitel lesen, wenn Sie schnell eindrucksvolle Ergebnisse produzieren wollen und Lust haben, etwas zu experimentieren.

Danach geht es in Kapitel 2 weiter mit den Grundlagen und Konzepten des Frameworks. In diesem Kapitel gehen wir zunächst auf einige Leitkonzepte von AngularJS ein. Dazu gehören das ModelView-ViewModel-Muster (MVVM) und die Zwei-Wege-Datenbindung (Two-Way Data Binding), Dependency Injection und das allgegenwärtige Thema der Testbarkeit. Außerdem stellen wir die einzelnen Anwendungsbausteine vor, die AngularJS mitbringt und mit denen wir unsere Anwendungen komponieren.

Beispielprojekt

Haben wir die Grundlagen verstanden, beginnen wir in Kapitel 3 mit der Entwicklung des Beispielprojekts mit dem Namen Book-Monkey. Das ist der Hauptteil des Buches und zeigt, wie wir mithilfe von AngularJS eine kleine Webanwendung erstellen können, die uns das Stöbern in einer Zusammenstellung von Büchern ermöglicht. Anhand dieses Beispieles werden die grundlegenden Konzepte und Features von AngularJS praktisch eingesetzt. Daher haben wir gezielt darauf geachtet, dass wir bei der Entwicklung dieser Applikation den testgetriebenen Entwicklungsansatz verfolgen. In Kapitel 4 erweitern wir das Projekt um einen Administrationsbereich, eigene Direktiven und binden einen REST Web Service an.

Projektbegleitende Themen

In den Kapiteln 5 und 6 behandeln wir projektbegleitende Themen wie die Projektverwaltung, die Automatisierung von Aufgaben, den Aspekt des Debuggens und die automatisierte Ausführung von Tests. In Kapitel 7 beantworten wir einige Fragen, die uns innerhalb von Projekten bereits mehrfach gestellt wurden.

Empfehlung

Als völliger AngularJS-Neuling bietet es sich an, die Kapitel 1 und 2 als Erstes zu lesen, um einen Einstieg in die Welt und das Vokabular des Frameworks zu erhalten. Aufbauend auf diesem Wissen kann das Praxisbeispiel in den Kapiteln 3 und 4 bearbeitet werden. Die Kapitel 5 bis 7 können unabhängig voneinander und von den vorherigen Kapiteln gelesen werden, um sich auf ein kommendes Projekt vorzubereiten oder die vorgestellten Tools in bestehende Projekte einzuführen.

Umgang mit Aktualisierung

Die mitgelieferten Beispiele sind in einem öffentlichen Repository¹ auf GitHub verfügbar. Diese sind lauffähig mit AngularJS in der Version 1.2.10. Diese Version entspricht der aktuellsten Version zum Zeitpunkt der Fertigstellung dieses Buches. Wir werden jedoch bemüht sein, die Beispiele entsprechend anzupassen, wenn in zukünftigen AngularJS-Versionen inkompatible Änderungen durchgeführt werden sollten. Sogenannte Breaking Changes werden wir mit einem Tag versehen, sodass auch Beispiele älterer Versionen weiterhin verfügbar sind.

Vertiefung und Beratung

Online-Portal AngularJS.DE

Die Autoren betreiben seit Anfang 2013 das Portal AngularJS.DE². Hier werden neben einem Open-Source-Buch regelmäßig Artikel zu aktuellen Themen rund um AngularJS veröffentlicht. In einem ständig wachsenden Entwicklerverzeichnis³ können sich AngularJS-Entwickler vernetzen und für Projekte anbieten. Benötigen Sie intensive Beratung oder eine Schulung Ihres Entwicklungsteams, können Sie Anfragen dieser Art ebenfalls über diese Seite direkt an die Autoren stellen.

1 AngularJS Schnellstart

Dieses Kapitel soll in Form von kurzen Beispielen die mächtigsten Features von AngularJS demonstrieren. Außerdem wollen wir ein erstes Gefühl dafür vermitteln, wie typische Quellcodefragmente in einer AngularJS-Anwendung aussehen. Die Beispiele sind absichtlich sehr einfach gehalten, um sie ohne tiefe Kenntnisse des Frameworks verstehen und ausführen zu können. Wir werden nicht alle Einzelheiten erklären, sondern die Erklärungen mit Absicht recht kurz halten. Wenn Sie das Buch durchgearbeitet haben, werden Sie die Beispiele in ihren Einzelheiten verstehen.

1.1 Zwei-Wege-Datenbindung: Boilerplate-Code war gestern

Eines der ausschlaggebenden Features, die für AngularJS sprechen, ist sicherlich die Zwei-Wege-Datenbindung (Two-Way Data-Binding). Die Zwei-Wege-Datenbindung sorgt dafür, dass sich Änderungen im Datenmodell automatisch auf die entsprechenden Elemente in der Ansicht auswirken und sich Benutzerinteraktionen innerhalb der Ansicht auch automatisch in dem Datenmodell widerspiegeln. Durch diesen automatischen Abgleich in beide Richtungen sprechen wir von einer Zwei-Wege-Datenbindung. Somit können wir uns sehr viel »Klebe-Code« (Boilerplate-Code) sparen, den wir sonst schreiben müssten, um die äquivalente Synchronisierungslogik zu implementieren. Das folgende Beispiel zeigt das Feature in Aktion.

Listing 1-1 Zwei-Wege-Datenbindung mit einem Eingabefeld

<!DOCTYPE html>
<html ng-app>
<head>
   <meta charset="utf-8">
</head>
<body>

<div>
    <label>Name:</label>
    <input type="text" ng-model="yourName">
    <hr>
    <h1>Hello {{yourName}}!</h1>
</div>

<script src="lib/angular/angular.js">
</script>

</body>
</html>

Ohne auf die Einzelheiten detailliert einzugehen, sehen wir, dass Listing 1-1 eine einfache HTML-Datei enthält, die ein input-Eingabefeld beinhaltet und eine Ausgabe in Form einer h1-Überschrift definiert. Wenn wir dieses Beispiel nun in einem Browser ausführen (siehe Abbildung 1-1), dann stellen wir fest, dass sich die Überschrift jedes Mal automatisch aktualisiert, wenn wir den Text in dem Eingabefeld ändern. Der Mechanismus, der das für uns übernimmt, ist also die Zwei-Wege-Datenbindung.

Abb. 1-1 Ausgabe des Beispiels aus Listing 1-1 in Chrome

ng-model ist eine Direktive.

Für die Herstellung der Zwei-Wege-Datenbindung ist in diesem Beispiel das Attribut ng-model verantwortlich. Oder anders erklärt: Das, was für HTML-Kenner aussieht wie ein unbekanntes HTML-Attribut, ist in der Welt von AngularJS eine sogenannte Direktive. Die ngModel-Direktive stellt eine Zwei-Wege-Datenbindung zwischen dem Eingabefeld und der Variable yourName her. Damit ändert sich der Wert dieser Variable automatisch entsprechend der Eingabe im Eingabefeld. Wo die Variable yourName definiert ist, ist zunächst einmal unerheblich.1

Expressions

Zum Verständnis dieses Beispiels fehlt jetzt noch die Erklärung zu dem Ausdruck in den doppelten geschweiften Klammern innerhalb des h1-Tags. Dabei handelt es sich um eine sogenannte Expression. Das ist der AngularJS-Mechanismus, mit dem wir Ausgaben produzieren können. Insbesondere erlauben uns Expressions, Variablenwerte auszugeben. Sie unterliegen dabei ebenfalls der Zwei-Wege-Datenbindung. Wenn sich also der Wert der Variable yourName verändert, dann wird die Expression neu ausgewertet, was schließlich dazu führt, dass sich die Ansicht automatisch aktualisiert. Auf diese Weise überträgt das Framework den Inhalt des Eingabefeldes automatisch in die Überschrift.

ng-app definiert eine AngularJS-Anwendung.

Wir sollten an dieser Stelle noch die ng-app-Direktive erwähnen, die in diesem Beispiel das html-Tag annotiert. Mithilfe dieser Direktive teilen wir AngularJS mit, welchen Teil des DOM (Document Object Model) das Framework als AngularJS-Anwendung betrachten soll. Dadurch dass wir die Direktive hier an das html-Tag schreiben, teilen wir AngularJS also mit, dass unsere Anwendung auf dem kompletten DOM operieren soll, weil das -Tag unser Wurzelknoten ist. Wir könnten die -Direktive aber auch an einen tiefer verschachtelten DOM-Knoten schreiben und nur für diesen entsprechenden Unterbaum des DOM eine AngularJS-Anwendung ausweisen. Somit würde das Framework alle Ausdrücke außerhalb dieses Unterbaums unangetastet lassen und ignorieren.

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!