AngularJS & Ionic Framework

Hybride App-Entwicklung mit JavaScript und HTML5

Bearbeitet vonBengt Weiße

1. Auflage 2016. Buch. 345 S. HardcoverISBN 978 3 446 44671 7

Format (B x L): 18 x 24,7 cmGewicht: 742 g

Weitere Fachgebiete > EDV, Informatik > Informatik

schnell und portofrei erhältlich bei

Die Online-Fachbuchhandlung beck-shop.de ist spezialisiert auf Fachbücher, insbesondere Recht, Steuern und Wirtschaft.Im Sortiment finden Sie alle Medien (Bücher, Zeitschriften, CDs, eBooks, etc.) aller Verlage. Ergänzt wird das Programmdurch Services wie Neuerscheinungsdienst oder Zusammenstellungen von Büchern zu Sonderpreisen. Der Shop führt mehr

als 8 Millionen Produkte.

Leseprobe

Bengt Weiße

AngularJS & Ionic Framework

Hybride App-Entwicklung mit JavaScript und HTML5

ISBN (Buch): 978-3-446-44671-7

ISBN (E-Book): 978-3-446-44807-0

Weitere Informationen oder Bestellungen unter

http://www.hanser-fachbuch.de/978-3-446-44671-7

sowie im Buchhandel.

© Carl Hanser Verlag, München

Vorwort . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XI

1 Einführung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

2 Das Ökosystem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52.1 Die Technologien und ihre Abhängigkeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52.2 Die Technologien und ihre Aufgaben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

3 Apache Cordova und Adobe PhoneGap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93.1 Einführung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93.2 Entstehung und Entwicklung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103.3 Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113.4 Umgang mit der CLI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

3.4.1 Das erste eigene Projekt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133.4.2 Die Projektstruktur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143.4.3 Eine Plattform hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163.4.4 Die Anwendung ausführen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173.4.5 Plugins verwalten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183.4.6 Die erste App bauen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193.4.7 Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

4 AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214.1 Einführung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

4.1.1 Was ist AngularJS? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214.1.2 Geschichte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224.1.3 Warum AngularJS als Single-Page-Application-Framework? . . . . . . . . . . . 23

4.1.3.1 Entwicklungsaktivitäten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234.1.3.2 Die Gemeinschaft . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244.1.3.3 Der Trend . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254.1.3.4 Fazit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

4.1.4 Das Grundkonzept . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254.1.4.1 Das Entwurfsmuster MVC und One-Way Data Binding . . . . . . . . . 264.1.4.2 Das Entwurfsmuster MVVM und Two-Way Data Binding . . . . . . . 28

Inhalt

VI   Inhalt

4.1.5 Der Scope als Repräsentant des Data Binding in AngularJS . . . . . . . . . . . 294.1.5.1 Scopes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294.1.5.2 Das Data Binding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

4.2 Die Komponenten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354.2.1 Die Bestandteile einer AngularJS-App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

4.2.1.1 Übersicht . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354.2.2 Die Einbindung von AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364.2.3 Das Modul . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

4.2.3.1 Die erste Anwendung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374.2.3.2 Bootstrap – der manuelle Anwendungsstart . . . . . . . . . . . . . . . . . 384.2.3.3 Konfiguration und Ausführung . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

4.2.4 Controller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404.2.4.1 Der erste Controller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404.2.4.2 Das erste ViewModel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414.2.4.3 Was ein Controller nicht ist . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

4.2.5 Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 434.2.6 Abhängigkeiten und Dependency Injection . . . . . . . . . . . . . . . . . . . . . . . . . 454.2.7 Services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

4.2.7.1 Value . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 494.2.7.2 Service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 504.2.7.3 Factory . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 524.2.7.4 Provider . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 524.2.7.5 Constant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 544.2.7.6 Abhängigkeiten zwischen Provider, Factory, Service und Value

im Detail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 564.2.7.7 Definition in der Konfigurationsphase . . . . . . . . . . . . . . . . . . . . . . 584.2.7.8 Decorator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

4.2.8 Direktiven . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 594.2.8.1 Definition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 594.2.8.2 Einbindung ins Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 594.2.8.3 Aufbau einer Direktive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

4.2.9 Routen mit ngRoute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 684.2.9.1 Einbindung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 694.2.9.2 URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 694.2.9.3 Routen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

4.3 Wichtige Direktiven in AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 794.3.1 Eine Anwendung starten mit ngApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 804.3.2 Controller und Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80

4.3.2.1 ngController . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 804.3.2.2 ngInclude . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

4.3.3 Routen und dynamische Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 814.3.3.1 ngView . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 814.3.3.2 ngHref . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82

4.3.4 Reaktion auf Klicks mit ngClick . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 824.3.5 Elemente ein- und ausblenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

4.3.5.1 ngIf . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 834.3.5.2 ngShow und ngHide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84

Inhalt  VII

4.3.6 Dynamisches Stylen von HTML-Elementen . . . . . . . . . . . . . . . . . . . . . . . . . 844.3.6.1 ngClass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 854.3.6.2 ngStyle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86

4.3.7 Dynamische Bilder mit ngSrc einbinden . . . . . . . . . . . . . . . . . . . . . . . . . . . 874.3.8 Schleifen mit ngRepeat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88

4.3.8.1 Normale Verwendung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 884.3.8.2 Spezielle Verwendung mit Start- und Endpunkt . . . . . . . . . . . . . . 904.3.8.3 Besondere Eigenschaften . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 914.3.8.4 Umgang mit Duplikaten mit track by . . . . . . . . . . . . . . . . . . . . . . . 93

4.3.9 Scope-Variablen mit ngInit initialisieren . . . . . . . . . . . . . . . . . . . . . . . . . . . 954.3.10 Formulare und Eingabeelemente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96

4.3.10.1 Formulare abschicken – ngSubmit . . . . . . . . . . . . . . . . . . . . . . . . . 974.3.10.2 Datenbindung von Eingabeelementen mit ngModel . . . . . . . . . . . 984.3.10.3 Reaktion auf Änderungen mit ngChange . . . . . . . . . . . . . . . . . . . . 984.3.10.4 Reagieren auf den Fokus von Eingabeelementen

mit ngFocus und ngBlur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 994.3.10.5 Deaktivieren von Eingabeelementen und Schaltflächen mit

ngDisabled . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1004.3.10.6 Übersicht eingabetypenabhängiger Direktiven . . . . . . . . . . . . . . . 100

4.3.11 Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1014.4 Formulare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102

4.4.1 Ein Formular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1024.4.2 Das Formular-Objekt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1024.4.3 Formvalidierung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

4.4.3.1 Browserbasierte Formvalidierung . . . . . . . . . . . . . . . . . . . . . . . . . . 1054.4.3.2 Eigene Formular-Validierung mit AngularJS . . . . . . . . . . . . . . . . . 107

4.4.4 Zustandsabhängiges Stylen von Eingabeelementen . . . . . . . . . . . . . . . . . . 1124.4.5 Formulare für Eilige . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113

4.5 Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1144.5.1 Was sind Events? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1144.5.2 JavaScript-Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1154.5.3 AngularJS-Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1164.5.4 AngularJS-Events am Beispiel von ngRoute . . . . . . . . . . . . . . . . . . . . . . . . . 120

4.6 Timeouts und Intervalle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1234.6.1 Timeouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1244.6.2 Intervalle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124

4.7 Watcher . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1254.7.1 Watcher-Typen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126

4.7.1.1 Einfacher Referenz-Watcher . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1264.7.1.2 Erweiterte Watcher – Collection-Watcher . . . . . . . . . . . . . . . . . . . . 1274.7.1.3 Tiefen- bzw. Gleichheits-Watcher . . . . . . . . . . . . . . . . . . . . . . . . . . . 1284.7.1.4 Gruppen- bzw. Multi-Watcher . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129

4.7.2 Hinweise zur Performance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1294.7.3 Entfernen von Watchern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1304.7.4 Überblick . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131

VIII   Inhalt

4.8 Promises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1314.8.1 Asynchronität . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1314.8.2 Der Mann im Mond . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1324.8.3 Promises in AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1334.8.4 Multiple Promises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138

4.9 Kommunikation mit Schnittstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1394.9.1 Einführung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1394.9.2 Die Umsetzung in AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1414.9.3 AngularJS-Erweiterungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1444.9.4 Abschluss . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146

5 Das Ionic Framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1475.1 Einführung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147

5.1.1 Was ist das Ionic Framework? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1475.1.2 Die Geschichte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1485.1.3 Warum sollte Ionic zur Erstellung hybrider Apps genutzt werden? . . . . . 1495.1.4 Zahlen und Fakten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1495.1.5 Der Einsatz von Ionic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150

5.2 Ionic – nicht nur ein Framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1515.2.1 Das Ionic-System im Überblick . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1515.2.2 Mitglied von Ionic.io werden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1525.2.3 Der Ionic Creator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1535.2.4 Das Ionic CLI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1535.2.5 Das Ionic Framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154

5.2.5.1 CSS-Komponenten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1545.2.5.2 JavaScript-Komponenten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157

5.2.6 Ionicons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1615.2.7 ngCordova . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1615.2.8 Keyboard Cordova-Plugin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1625.2.9 Backend-Services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1625.2.10 Der Ionic-Spielplatz – ein Online-Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1645.2.11 Die Ionic View App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1645.2.12 Ionic Box – Entwicklungsumgebung für Android . . . . . . . . . . . . . . . . . . . . 1655.2.13 Ionic Showcase – zeig, was Du geschaffen hast . . . . . . . . . . . . . . . . . . . . . . 1655.2.14 Ionic Market . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1665.2.15 Ionic Lab . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166

5.3 Das Ionic CLI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1665.3.1 Einführung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1665.3.2 Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167

5.3.2.1 Für Geduldige . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1675.3.2.2 Für Eilige . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167

5.3.3 Umgang mit dem CLI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1675.3.3.1 Das erste Projekt anlegen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1675.3.3.2 Die Projektstruktur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1685.3.3.3 Das Framework aktualisieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1705.3.3.4 Eine Plattform hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170

Inhalt  IX

5.3.3.5 Die Anwendung ausführen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1715.3.3.6 Plugins verwalten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1735.3.3.7 Bauen der Anwendung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1745.3.3.8 Upload der Anwendung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1745.3.3.9 Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175

5.4 Das Framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1765.4.1 Die Bestandteile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1765.4.2 Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1775.4.3 Einbindung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1785.4.4 Erweiterung des Routings mit dem uiRouter . . . . . . . . . . . . . . . . . . . . . . . . 179

5.4.4.1 Zustände statt Routen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1795.4.4.2 uiView statt ngView . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1805.4.4.3 Multi-Views . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1805.4.4.4 Verschachtelte Zustände . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1815.4.4.5 Abstrakte Zustände . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1835.4.4.6 Parameter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1845.4.4.7 Resolves . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1845.4.4.8 Eigene Daten am Zustand speichern . . . . . . . . . . . . . . . . . . . . . . . . 1855.4.4.9 Zustände im Controller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1865.4.4.10 uiSref statt ngHref . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1875.4.4.11 Events bei Zustandsänderungen . . . . . . . . . . . . . . . . . . . . . . . . . . . 188

5.4.5 Die JavaScript-Komponenten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1905.4.5.1 Das Grundlayout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1905.4.5.2 Die Navigationsstruktur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2005.4.5.3 Strukturierung der App durch Tabs . . . . . . . . . . . . . . . . . . . . . . . . 2145.4.5.4 Eigene Scroll-Container . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2185.4.5.5 Erstellen dynamischer und performanter Listen . . . . . . . . . . . . . . 2225.4.5.6 Inhalte aktualisieren mit ionRefresher . . . . . . . . . . . . . . . . . . . . . . 2305.4.5.7 Nachladen von Inhalten mit ionInfiniteScroll . . . . . . . . . . . . . . . . 2315.4.5.8 Formular-Elemente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2335.4.5.9 Modals – Dialogfenster mit $ionicModal . . . . . . . . . . . . . . . . . . . . 2355.4.5.10 Popups mit $ionicPopup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2395.4.5.11 Popover mit $ionicPopover . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2445.4.5.12 Action Sheet – Funktionstafel mit $ionicActionSheet . . . . . . . . . . 2485.4.5.13 Lade-Layer mit $ionicLoading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2515.4.5.14 Backdrop – Interaktionen mit der View unterbinden . . . . . . . . . . 2535.4.5.15 Bildergalerie und mehr mit der Ionic Slidebox . . . . . . . . . . . . . . . 2545.4.5.16 Lade-Animationen mit ionSpinner . . . . . . . . . . . . . . . . . . . . . . . . . 2585.4.5.17 Einfaches Arbeiten mit Gesten und Events . . . . . . . . . . . . . . . . . . 2595.4.5.18 Informationen und Einstellungen des Gerätes

über ionic.Platform und $ionicPlatform . . . . . . . . . . . . . . . . . . . . . 2635.4.5.19 Konfiguration des Frameworks über $ionicConfig . . . . . . . . . . . . 2665.4.5.20 Weitere Werkzeuge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270

X   Inhalt

6 Eine eigene Musikverwaltungs-App erstellen . . . . . . . . . . . . . . . . . . . . . . . . 2756.1 Definition der Anforderungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2756.2 Konzeption . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2786.3 Umsetzung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282

6.3.1 Grundlayout und Navigationsstruktur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2826.3.2 Das Füllen der Views . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284

6.3.2.1 Demo-Daten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2846.3.2.2 Das Dashboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2856.3.2.3 Das Seitenmenü mit Genre- und Inhaltsseitenliste . . . . . . . . . . . . 2906.3.2.4 Ansicht einer Inhaltsseite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2956.3.2.5 Musikliste . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2976.3.2.6 Detailansicht eines Musikeintrags . . . . . . . . . . . . . . . . . . . . . . . . . 302

6.3.3 Fazit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3106.4 Nutzung der Kamera mit ngCordova . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310

6.4.1 Installation von ngCordova . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3116.4.2 Installation des Kamera-Plugins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3116.4.3 Nutzung der Kamera mit ngCordova . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311

7 AngularJS und Ionic für Fortgeschrittene . . . . . . . . . . . . . . . . . . . . . . . . . . . 3157.1 AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315

7.1.1 Animationen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3157.1.1.1 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3157.1.1.2 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316

7.1.2 Filter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3197.1.3 Tests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321

7.2 Ionic Framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3227.2.1 Die Installation von Backend-Services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3227.2.2 Stylen einer App mit SASS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3257.2.3 Das Generieren von App-Icons und -Splashscreens . . . . . . . . . . . . . . . . . . 326

7.2.3.1 Icons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3267.2.3.2 Splashscreens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326

8 Ausblick . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329

Dies ist die erste Auflage meines Buches AngularJS und das Ionic Framework. Als Entwickler war ich bereits bei einem der führenden Anbieter von eCommerce Software tätig. Als tech-nischer Leiter bei der FLYACTS GmbH bin ich für die Entwicklung hybrider Apps verant-wortlich und kam so unweigerlich zu AngularJS und dem Ionic Framework.Das Buch richtet sich vor allem an Webentwickler, die in das Thema AngularJS oder Ionic einsteigen wollen oder bereits damit arbeiten. Für Webagenturen kann sich aus diesem Bereich ein weiteres Standbein entwickeln, da sie mit bereits bekannten Mitteln mobile Apps erstellen können. Natürlich soll auch jeder Interessierte seinen Wissensdurst mit die-sem Werk stillen. Des Weiteren kann es als Begleitwerk zu schulischen oder hochschuli-schen Veranstaltungen dienen.Alle beschriebenen Funktionalitäten der Technologien beziehen sich dabei auf die Ver-sionen 1.0 und 1.1 des Ionic Frameworks und 1.6.3 und 1.6.4 der Ionic CLI. In Version 1.0 kommt AngularJS 1.3.13 und in 1.1 AngularJS 1.4.3 zum Einsatz.Die Technologien selbst entwickeln sich äußerst schnell weiter, sodass Funktionen in der Zwischenzeit in aktuelleren Versionen hinzugekommen oder weggefallen sein können.Die Kapitel beinhalten zahlreiche praktische Beispiele, weshalb bei der Umsetzung auf die oben genannten Versionen Rücksicht genommen werden sollte.Als Entwickler von hybriden und mobilen Apps konnte ich die Entwicklung des Ionic Frameworks hautnah und tagtäglich miterleben. Deshalb setzt dieses Buch nicht nur auf die Vermittlung theoretischer Fakten, sondern führt den Leser zielstrebig zur Umsetzung einer eigenen Anwendung.Zusätzlich gehe ich in Form von Hinweisen oder Tipps auf viele Probleme und Knackpunkte ein, die es bei der Programmierung mit AngularJS und Ionic gibt, und zeige, wenn möglich, Lösungen auf.

https://github.com/AngularIonicHier stehen alle Quelltexte aus dem Buch zur Verfügung: � die Listings: https://github.com/AngularIonic/Buch � die komplette Beispielanwendung: https://github.com/AngularIonic/MusikMax

Vorwort

XII   Vorwort

An dieser Stelle möchte ich mich ganz besonders bei Anja Heumann für die Erstellung der schönen Grafiken und für ihre Korrekturarbeit bedanken.Ein weiteres Dankeschön geht an das Ionic-Team selbst, insbesondere an Mike Hartington. Sie hatten stets ein offenes Ohr für meine Fragen.

Jena, Januar 2016Bengt Weiße

3■■ 3.1■ Einführung

Eine nativ entwickelte mobile Anwendung zeichnet sich durch den weitreichenden Zugriff auf die Funktionalitäten des Gerätes aus. Diesen erhält sie entweder durch die Entwicklung mit der vom Betriebssystem vorgeschriebenen Programmiersprache oder durch den Einsatz der systemspezifischen Tools und Baukästen. Unter Android werden diese zwei Komponen-ten durch die Programmiersprache Java und das Android SDK (Software Development Kit) repräsentiert. Dem gegenüber stehen die Programmiersprachen Objective-C und Swift sowie die XCode IDE (Integrated Development Environment) für das Betriebssystem iOS von Apple. Aufgrund der verschiedenen Architekturen und Technologien müssen native Apps für jede Plattform entwickelt werden. Dadurch kann sich der Entwickler auch bei den vor-gegebenen UI-Elementen des Betriebssystems bedienen. Darunter fallen beispielsweise Checkboxen, Listen, Tooltipps oder das Action-Sheet auf iOS.Wäre es nun möglich, eine App mit einfachen Webtechnologien, wie JavaScript, HTML und CSS, zu programmieren, müsste diese Anwendung trotzdem in die für das Betriebssystem passende Form gebracht werden. Ein System basierend auf JavaScript-, HTML- und CSS-Dateien ist dafür nicht ausreichend.An diesem Punkt setzen Cordova und Adobe PhoneGap an. Mit beiden Systemen lassen sich Webanwendungen einfach und schnell in eine App verwandeln. Mithilfe einer Code-Basis können dadurch gleich mehrere Plattformen bedient werden.

Aufgaben von Apache Cordova/Adobe PhoneGap: � Aufbau und Strukturierung der Anwendung � Bereitstellung von Schnittstellen für die Verwendung nativer Funktionen (z. B. Benach-richtigungen, Kamera, Dateisystem)

� Finales Erzeugen der App für die spezifischen Plattformen (z. B. .apk-Dateien für Android, .ipa-Dateien für iOS)

� Bereitstellung von Tools zum Testen und EmulierenBeide genannten Systeme benötigen die Entwicklungsumgebungen der zu unterstützenden Plattform, damit sie aus dem Quellcode eine mobile Anwendung bauen können. Dies wird

Apache Cordova und Adobe PhoneGap

10  3 Apache Cordova und Adobe PhoneGap

hauptsächlich bei Apps für iOS zu einer Hürde, da die Entwicklungsumgebung XCode nur für Mac OS zur Verfügung steht. Aus diesem Grund werden weitere Erklärungen und Bei-spiele anhand von Android dargelegt.Die angesprochenen Schnittstellen sind begrenzt und bieten nur grundlegende Zugriffe auf das Gerät und dessen Sensoren. Aus diesem Grund gibt es eine Vielzahl von Plugins, wel-che die Funktionspalette erweitern. Falls unter den vorhandenen Plugins eine gewünschte Funktionalität nicht verfügbar ist, können auch eigene Erweiterungen entwickelt und ver-öffentlicht werden. Diese müssen jedoch zwingend mit den systemspezifischen Program-miersprachen entwickelt werden. Dennoch ist der Aufwand deutlich geringer, als zwei kom-plette Anwendungsprojekte zu warten.Ein großer Unterschied zwischen Cordova und PhoneGap existiert derzeit nicht. Im Grunde basiert PhoneGap auf Cordova, behält sich aber vor, die nativen Schnittstellen bzw. APIs zu erweitern. Bisher wird jedoch der Cordova-Programmcode fast eins zu eins übernommen, was auch anhand der Versionierung beider Projekte ersichtlich wird. Der Grund dafür lässt sich durch die gemeinsamen Wurzeln erahnen.

■■ 3.2■ Entstehung und Entwicklung

Die Idee für ein System zur Erstellung von hybriden Anwendungen für mobile Systeme kam bereits im Sommer 2008 auf – nur knapp ein dreiviertel Jahr nachdem das erste iPhone auf dem deutschen Markt eingeführt wurde. Nach dem iPhoneDevCamp 2008 in San Francisco (einer iPhone-Entwickler-Konferenz) entstand die Vision, ein System zu entwickeln, wel-ches native Funktionalitäten von mobilen Geräten Webanwendungen zur Verfügung stellt. Das Ziel war es, Anwendungen nur mit Webtechnologien umzusetzen. Auf der genannten Konferenz gelang es bereits, einer Web-App die Standortbestimmung des iPhones zur Ver-fügung zu stellen. Unter den Teilnehmern waren unter anderem die PhoneGap-Gründer Rob Ellis und André Charland. Letzterer war zu diesem Zeitpunkt Geschäftsführer des von ihm 1998 gegründeten Unternehmens Nitobi, welches dieses Vorhaben unter dem Produkttitel PhoneGap umsetzte. Schon im April 2009 wurde Nitobis PhoneGap mit dem People’s Choice Award auf der Web 2.0 Expo ausgezeichnet.Nach zwei Jahren kontinuierlicher Entwicklung zeichnete sich 2011 der nächste große Schritt für PhoneGap ab. Adobe bekundete Interesse an Nitobis Hauptprodukt und kaufte noch im selben Jahr das gesamte Unternehmen, um es der Apache Software Foundation zu spenden. Dort entsteht aus PhoneGap das Open-Source-Projekt Apache Cordova. Der ursprüngliche Name lautete Apache Callback. Dieser wurde jedoch verworfen, da Callback in der Softwareentwicklung ein zu generischer und gebräuchlicher Begriff ist. Parallel dazu existierte ein eigenes Projekt bei Adobe. Dabei wurde die alte Bezeichnung PhoneGap über-nommen und es entstand Adobe PhoneGap. Bis heute bestehen beide Projekte, wobei Phone-Gap auf Cordova basiert. Adobe behält sich jedoch vor, Veränderungen am Quellcode vorzu-nehmen, eigene Erweiterungen zu implementieren oder eigene Services aufbauend auf dem eigenen Produkt anzubieten. Jedoch halten sich die Änderungen derzeit in Grenzen, was die gleiche Versionierung beider Systeme erkennen lässt. Im April 2015 erschien sowohl von

3.3 Installation  11

Apache Cordova und als auch von Adobe PhoneGap die Version 5.0.0. Beide Systeme wer-den stetig weiterentwickelt. Besonders hervorzuheben ist die schnelle Reaktionszeit bei Anregungen oder auftretenden Problemen.Bei den Lösungen von Adobe und Apache handelt es sich um sogenannte CLIs. CLI ist die Abkürzung für Command-Line-Interface, was zu Deutsch so viel wie Kommandozeilen-schnittstelle bedeutet. Das heißt, dass die Steuerung und Nutzung über ein Eingabeauffor-derungsfenster unter Windows bzw. einem Terminal unter Linux und Mac OS geschieht. PhoneGap bietet als Alternative einen eigenen Service namens PhoneGap Build an. Dort kann der Programmcode einer Anwendung hinterlegt werden, woraufhin der Service die finale Anwendung für die verschiedenen Plattformen baut.

■■ 3.3■ Installation

Nach der kurzen Einführung in das Thema Cordova bzw. PhoneGap und einem kleinen Einblick in die Entstehungsgeschichte dieser Systeme soll dieser Abschnitt Einblick in die Einrichtung geben. Aufgrund der Verbreitung und Nutzung werden die Inhalte im Verlaufe des Buches anhand des Windows Betriebssystems 8.1 und das Cordova CLI 5.0.0 erläutert. Der Ablauf, die Voraussetzungen und die Installationsschritte sind für das PhoneGap CLI 5.0.0 gleich. Zusätzlich wird ein kurzer Überblick über das Setup auf Linux und Mac OS-Systemen gegeben.Ein CLI muss, wie jede andere Anwendung, in einer Programmiersprache geschrieben sein und vom System interpretiert werden können, damit sie ausgeführt werden kann. Das Cor-dova CLI setzt auf die noch recht neue plattformübergreifende Laufzeitumgebung NodeJS. Mit NodeJS lassen sich Server- und Netzwerkanwendungen mit JavaScript realisieren. Da Cordova ein Open-Source-Projekt ist, werden auch nur Technologien benutzt, deren Quell-code öffentlich zur Verfügung steht. Als Erstes muss NodeJS auf dem Rechner installiert werden, falls es noch nicht vorhanden ist.Im einfachsten Fall bietet NodeJS für das vorliegende Betriebssystem bereits einen Installer, der alles Nötige selbst einrichtet. Für Windows findet sich im Download-Bereich der NodeJS-Webseite bereits ein solcher Installer (https://nodejs.org/download/  – NODEJS 0.12.4). Nach dem Herunterladen der .msi-Datei kann diese ausgeführt werden. Daraufhin startet der Installations-Assistent, wobei dort alle vorgeschlagenen Standardeinstellungen beibe-halten werden können. Ist die Installation abgeschlossen, wird der Rechner neu gestartet. Neben NodeJS wird auch das Paketverwaltungssystem NPM (Node Package Manager) instal-liert, welches dazu dient, zusätzliche NodeJS-Module und -Anwendungen zu installieren, zu deinstallieren oder zu aktualisieren. Um zu überprüfen, ob die Installation funktioniert hat, kann eine neue Eingabeaufforderung geöffnet und folgende Befehle können nacheinander eingegeben werden:

node -v

(sollte die installierte NodeJS-Version zurückgeben, z. B. v0.12.4)

12  3 Apache Cordova und Adobe PhoneGap

npm -v

(sollte die installierte NPM-Version ausgeben, z. B. 2.10.1)Damit Cordova später die Apps in das passende Format bringen kann, muss die für die mobile Plattform entsprechende Entwicklungsumgebung installiert sein. Im Falle von Android handelt es sich um das Android SDK. Dieses kann im Entwicklerportal von Google heruntergeladen werden (https://developer.android.com/sdk/index.html#Other v24.2).Nach der Installation öffnet sich der Android SDK Manager, mit dessen Hilfe weitere Tools und SDK-Versionen installiert werden können. Hier sollten die SDKs der zu unterstützen-den Android-Versionen installiert sein. Da für das Bauen von iOS-Apps immer XCode gebraucht wird, kann dies nur auf einem Computer mit Mac OS geschehen. Die Einrichtung auf diesem Betriebssystem erfolgt nach dem gleichen Prinzip wie bei einem Windows-Rech-ner. Der einzige und komfortable Unterschied ist, dass XCode standardmäßig auf Mac OS-Geräten vorinstalliert ist.Als letzte Voraussetzung wird das Git CLI benötigt. Bei Git handelt es sich um ein freies und performantes Datei-Versionierungssystem. Dieses erfreut sich momentan immer größerer Beliebtheit – viele Unternehmen lösen alte Strukturen auf und setzen auf dieses neue Sys-tem. Daraus sind auch bekannte Online-Dienste wie GitHub, GitLab oder Bitbucket entstan-den. GitHub wird vor allem von Open-Source-Projekten benutzt. Unter diesen befinden sich auch Apache und das Cordova-Projekt. Über die offizielle Git-Webseite lassen sich auch hier Installer für verschiedenste Betriebssysteme herunterladen (https://git-scm.com/download v1.9.5). Aktuell wird die Version 1.9.5 verwendet. Git bringt eine eigene Eingabeaufforde-rung mit – die Git-Bash. Sie bringt einige Tools und Konsolenbefehle mit, die so auf Win-dows nicht verfügbar wären. Wer nicht zwei verschiedene Eingabeaufforderungen nutzen will, kann während der Installation eine Einstellung wählen, sodass auch die Windows-Eingabeaufforderung alle zusätzlichen Funktionen erhält. Über das Git CLI kann Cordova eigene Beispielprojekte oder Module und Komponenten versionsabhängig herunterladen und verwenden.Nun sind alle Vorbereitungen für die eigentliche Cordova-Installation getroffen. Als finalen Schritt wird eine Eingabeaufforderung benötigt. Dort kann nun der Installationsbefehl für Cordova eingegeben werden:

npm install -g cordova

Unter Mac OS und Linux-Betriebssystemen muss der Befehl mit root-Rechten ausgeführt werden, weshalb der Befehl wie folgt aussieht:

sudo npm install -g cordova

Nun sollte das Cordova CLI global auf dem Rechner verfügbar sein. Zur Kontrolle kann auch hier die installierte Version durch einen Befehl in der Eingabeaufforderung überprüft werden:

cordova -v

(sollte die installierte Version ausgeben, z. B. 5.0.0)

3.4 Umgang mit der CLI  13

Um Adobes PhoneGap zu installieren, muss in den eben vorgestellten Kommandos cordova durch phonegap ersetzt werden. Damit ist die Installation des Cordova CLI abgeschlossen und die Entwicklungsumgebung ist bereit, ein neues Cordova-Project anzulegen.

Anleitung für Eilige

Voraussetzung: � NodeJS und NPM (zur Überprüfung: node -v bzw. npm -v) � Android SDK (benötigt das Java SDK) � Git

Installation: � npm install -g cordova (zur Überprüfung: cordova -v)

■■ 3.4■ Umgang mit der CLI

3.4.1■ Das erste eigene Projekt

Cordova versucht, den Umgang mit dem CLI möglichst simpel zu gestalten. Dabei soll der Entwickler so wenig wie möglich über die zu unterstützenden Systeme wissen müssen. Deshalb bietet Cordova für alle grundlegenden Konfigurationen und möglichen Anpassun-gen einfache und aussagekräftige Befehle für die Kommandozeile an. Das beginnt bereits bei der initialen Erstellung eines Projekts und zieht sich bis zum finalen Bauen der Anwen-dungsdateien hindurch.Zuerst sollte ein geeigneter Platz auf der Festplatte gefunden werden, an dem das Projekt generiert und gespeichert werden kann. Ist dieser gefunden, generiert der nachfolgende Befehl ein neues Cordova-Projekt:

cordova create cordovaProjekt com.beispiel.hallo MeineErsteApp

Der Abschnitt cordova create ruft die Projekterzeugungs-Funktion des Cordova CLI auf. Danach folgt der Ordnername, in dem die erzeugten Dateien und Verzeichnisse abgelegt werden sollen. Dieser muss nicht existieren, sondern wird im Prozess angelegt.Als Nächstes folgt die Projekt-ID mit com.beispiel.hallo. Diese hat eine grundlegende Bedeutung für die spätere Veröffentlichung der App. Jede Anwendung hat eine eindeutige ID, die in den App-Stores nur einmal vorkommen darf. Wird die ID einer veröffentlichten App später geändert, werten die App-Stores diese als neue Applikation. Ein neuer App-Store-Eintrag wird angelegt und im schlimmsten Fall sind dann beide Versionen der App für die Endnutzer verfügbar. Daher sollte spätestens vor der Veröffentlichung überprüft wer-den, ob eine sinnvolle und möglichst spezifische ID hinterlegt wurde.

14  3 Apache Cordova und Adobe PhoneGap

Der letzte Abschnitt des Befehls MeineErsteApp stellt den späteren Anzeigenamen dar. Dieser erscheint nach dem Installieren auf einem mobilen Endgerät in der Liste der instal-lierten Apps.

3.4.2■ Die Projektstruktur

Hat das Erstellen geklappt, sollte nun ein Ordner cordovaProjekt existieren und folgende Verzeichnisse und Dateien beinhalten (Bild 3.1).

gulp.js

hooks

ionic.project

plugins

www

css

img

js

index.html

style.css

ionic.png

index.js

config.xml

scss

  Bild 3.1■ Ordnerstruktur des Beispielprojektes

Die wichtigsten Dateien sind die config.xml und die Inhalte des www-Ordners. Wie der Name schon vermuten lässt, beinhaltet die config.xml (Listing 3.1) alle wichtigen Einstel-lungen für das Projekt. Sie ist notwendig, um das Projekt auszuführen und die Anwen-

3.4 Umgang mit der CLI  15

dungsdateien bauen zu können. Der Inhalt lässt sich aber bedenkenlos ansehen und später, wenn notwendig, auch ändern.

Listing 3.1■Beispiel einer config.xml

<?xml version='1.0' encoding='utf-8'?><widgetid="com.beispiel.hallo" version="0.0.1" xmlns=http://www.w3.org/ns/widgets xmlns:cdv="http://cordova.apache.org/ns/1.0"> <name>HelloWorld</name> <description> A sample Apache Cordova application that responds to the deviceready event. </description> <author email="dev@cordova.apache.org" href="http://cordova.io"> Apache Cordova Team </author> <content src="index.html" /> <plugin name="cordova-plugin-whitelist" version="1" /> <access origin="*" /> <allow-intent href="http://*/*" /> <allow-intent href="https://*/*" /> <allow-intent href="tel:*" /> <allow-intent href="sms:*" /> <allow-intent href="mailto:*" /> <allow-intent href="geo:*" /> <platform name="android"> <allow-intent href="market:*" /> </platform> <platform name="ios"> <allow-intent href="itms:*" /> <allow-intent href="itms-apps:*" /> </platform></widget>

Hier findet sich auch die gewählte App-ID im widget-Abschnitt wieder. Sie kann wie der App-Name im name-Block geändert werden. Zusätzlich können eine Beschreibung und Informationen über den Autor hinterlegt werden.Die Dateien des www-Verzeichnisses stellen die eigentlichen Inhalte der App dar. Hier lie-gen alle HTML- und JavaScript-Dateien, mögliche zusätzliche Bibliotheken, Styling-Dateien (z. B. CSS) und statische Dateien, wie App-Logos, Splashscreens und andere Grafiken, die innerhalb der Anwendung benötigt werden. Die Struktur der Unterordner ist nur ein Vor-schlag und kann nach Belieben variiert werden. Wichtig ist nur, dass der Startpunkt der App – in diesem Fall die index.html – erhalten bleibt. Aber selbst diese Basisdatei kann in der config.xml im Abschnitt content verändert werden. Die aktuelle index.html sollte ungefähr wie folgt aufgebaut sein (Listing 3.2):

Listing 3.2■Beispiel einer index.html

<html> <head> <meta http-equiv="Content-Security-Policy" content="default-src 'self' data:gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta name="viewport" content="user-scalable=no, initial-scale=1,

16  3 Apache Cordova und Adobe PhoneGap

maximum-scale=1, minimum-scale=1, width=device-width"> <link rel="stylesheet" type="text/css" href="css/index.css"> <title>Hello World</title> </head> <body> <div class="app"> <h1>Apache Cordova</h1> <div id="deviceready" class="blink"> <p class="event listening">Connecting to Device</p> <p class="event received">Device is Ready</p> </div> </div> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> </body></html>

In dieser HTML-Datei werden alle eigenen Quellen eingebunden  – im Kopfbereich die .css-Datei und im body die index.js sowie, bei allen Cordova-Projekten notwendig, die cordova.js. Durch diese Datei erhält die gebaute Anwendung erst die Schnittstellen zum Gerät.Im Verzeichnis platforms werden später die verschiedenen Quellen für die zu unterstüt-zende Plattformen hinterlegt. In dem aktuellen Zustand des Projekts ist noch keine Platt-form angegeben.Die Ordner hooks und plugins sind in diesem Abschnitt eher unwichtig, sollen jedoch nicht unerwähnt bleiben. Das englische Wort Hook bedeutet auf Deutsch so viel wie Haken bzw. Aufhänger. In der Programmierung ist vielleicht der Begriff Einhängepunkte treffender. Cordova bietet nämlich während des Bauprozesses verschiedene Punkte an, in denen sich der Entwickler mit eigenen NodeJS-Skripten einhaken kann. Plugins sind dagegen wie ein-gangs erwähnt Erweiterungen, um zusätzliche native Funktionen des mobilen Endgeräts nutzen zu können.Somit ist der grundlegende Aufbau eines Cordova-Projekts erläutert. Im Anschluss kann nun das Beispielprojekt im Android-Kontext ausgeführt werden.

3.4.3■ Eine Plattform hinzufügen

Für die Generierung einer hybriden Anwendung auf Basis von Cordova ist es notwendig, die Plattformen und Betriebssystemarten, auf denen die App erscheinen soll, anzugeben. Je nach Plattform müssen zusätzliche Quellen abgerufen und eingerichtet werden. Darüber hinaus wird nur das installiert, was auch benötigt wird. Nutzt man beispielsweise später ein externes Plugin, richtet Cordova dieses nur für die angegebenen Plattformen ein. Um das Beispielprojekt für Android zu registrieren, genügt folgender Befehl:

cordova platform add android

Daraufhin werden die nötigen Inhalte über NPM heruntergeladen und installiert. Als Ergeb-nis sollte nun im Verzeichnis platforms ein Unterordner android erscheinen. Nach diesem Prinzip können weitere Plattformen hinzugefügt werden. Zur Erinnerung: iOS ist davon jedoch ausgeschlossen, da iOS-Apps nur auf Mac OS erzeugt werden können.

3.4 Umgang mit der CLI  17

Durch die folgende Konsoleneingabe wird eine Plattform wieder entfernt:

cordova platform remove android

3.4.4■ Die Anwendung ausführen

Im einfachsten Fall ist die App wie eine Webanwendung aufgebaut und kann über die index.html in einem installierten Browser aufgerufen werden. Dabei kann jedoch nicht auf die nativen Schnittstellen zurückgegriffen werden.

  Bild 3.2■ Ausführung der Anwendung im Browser

In der Mitte des geöffneten Browserfensters sollte nun obiges Bild (Bild 3.2) erscheinen. Dabei sollte der Text unter Apache Cordova beachtet werden. Connecting to device heißt so viel wie Verbinde mit Gerät. Da auf keine native Schnittstelle bzw. API zugegriffen werden kann, erhält die Anwendung auch keinerlei Informationen über den aktuellen Gerätestatus. Aus diesem Grund gibt es weitere Möglichkeiten, während der Entwicklung die Anwendung zu testen. Die erste ist sehr schnell und flexibel. Die Anwendung wird auf dem Computer gestartet und auch für mobile Geräte im gleichen Netzwerk zur Verfügung gestellt. Das Ganze geschieht über ein Cordova CLI-Kommando:

cordova serve android

Nach dem Ausführen des Befehls kann im Browser folgende Adresse aufgerufen werden:

http://localhost:8000/

Nun erscheint eine Übersicht an Informationen über die App und eine Liste von Plattfor-men. Android ist die einzige anklickbare Option. Wird der Link geöffnet, erscheint die schon bekannte App-Oberfläche. Sollten nun Hinweisfenster erscheinen, werden diese über Abbre-chen geschlossen. Mit dem Unterschied zur vorher erklärten Variante wird nun Device is ready (das Gerät ist bereit) angezeigt (Bild 3.3).

  Bild 3.3■ Ausführung der Anwendung im nativen Kontext

18  3 Apache Cordova und Adobe PhoneGap

Befindet sich ein mobiles Gerät im gleichen Netzwerk wie der Rechner – im einfachsten Fall sind sie im gleichen WLAN –, kann über die interne IP-Adresse des Rechners auch vom Smartphone oder Tablet auf die Anwendung zugegriffen werden. Als Beispiel kann im Browser des Android-Telefons die IP-Adresse mit dem Port 8000 eingegeben werden:

http://192.168.178.33:8000

Die letzte Methode, die App vor dem eigentlichen Bauen auszuführen und zu testen, benutzt sogenannte Emulatoren (Bild 3.4). Diese sind meist bei den bereits installierten plattform-abhängigen Tools dabei. Dadurch ist es möglich, Funktionen einer bestimmten Betriebssys-temversion oder eines bestimmten Gerätetyps nachzuahmen und die App in diesem Kontext auf einem Computer auszuführen. Die Einrichtung kann jedoch ein wenig kompliziert sein. An dieser Stelle wird nicht näher darauf eingegangen, da diese Informationen für das wei-tere Verständnis des Buches nicht notwendig sind. Letztendlich wird auch diese Cordova-Funktion über einen kleinen Befehl gestartet:

cordova emulate android

  Bild 3.4■ Ausführung der Anwendung im Android Emulator

3.4.5■ Plugins verwalten

Im Normalfall lebt eine App von der Interaktivität mit dem mobilen Gerät – sei es die Benut-zung der Kamera oder die Verknüpfung mit sozialen Netzwerken wie Facebook. Dazu rei-chen die von Cordova standardmäßig angebotenen Schnittstellen nicht aus. Jedoch gibt es

3.4 Umgang mit der CLI  19

aufgrund des freien Quellcodes und eines eigenen Plugin-Systems eine Vielzahl von Erwei-terungen. Ein Cordova-Plugin wird in der Regel in der für die Plattformen vorgeschriebenen Programmiersprache geschrieben. Dazu kommt eine JavaScript-Datei, welche die Brücke zwischen nativem Code und späterer Webanwendung darstellt. Diese muss nach einem gewissen Schema aufgebaut sein, damit Cordova das Plugin erkennt und verwenden kann. Ein Plugin kann mit einfachen Mitteln öffentlich anderen Nutzern zugänglich gemacht wer-den. Auf die Erstellung und Programmierung eines eigenen Plugins wird an dieser Stelle nicht genauer eingegangen.PhoneGap als auch Cordova besitzen eigene Webseiten, auf denen nach Plugins gesucht werden kann. Ganz einfach funktioniert das Suchen aber auch über die CLIs:

cordova plugin search bar

Dieser Befehl spricht die Plugin-Funktion des Cordova-CLI an und startet eine Suche nach Schlagwörtern. In diesem Beispiel werden Erweiterungen nach dem Wort bar durchsucht. Als Ergebnis werden eine Liste von Plugin-Namen und eine Beschreibung ausgegeben. Über den angegebenen Namen kann ein Plugin installiert werden, z. B.:

cordova plugin add cordova-plugin-statusbar

Danach liegt das Plugin im Projektverzeichnis unter plugins. Eine Erweiterung lässt sich äquivalent zum Befehl von Plattformen wieder entfernen:

cordova plugin remove cordova-plugin-statusbar

Sollte im Entwicklungsprozess eine Plattform hinzukommen, müssen bereits installierte Plugins entfernt und nochmals installiert werden, da die Quellen für diese Plattformen sonst fehlen.Ist eine Erweiterung noch nicht bei Cordova registriert, kann diese über ihr Git-Repository installiert werden. Dazu wird einfach im Installationsbefehl der Plugin-Name mit der URL zum entsprechenden Repository ausgetauscht:

cordova plugin add https://github.com/apache/cordova-plugin-file.git

Zur Verwendung des individuellen Plugins gibt es auf der Plugin-Seite oder – falls vorhan-den – in der Anleitungsdatei im Plugin-Ordner des Projekts weitere Informationen.

3.4.6■ Die erste App bauen

Nachdem alle Grundlagen zum Entwickeln mit dem Cordova CLI vermittelt wurden, fehlt nur noch der letzte und wichtigste Schritt auf dem Weg zur eigenen App – das Bauen. Dabei werden für jede Plattform spezifische Anwendungspakete gebaut. Unter Android entsteht im Bauprozess die .apk-Datei.

cordova build android

20  3 Apache Cordova und Adobe PhoneGap

Die Ausgaben des Befehls geben Aufschluss über die einzelnen Schritte des Prozesses und im Erfolgsfall zusätzlich den Pfad zur erstellten App. In Fall des Beispielprojekts sollte dieser dem folgenden ab dem Projektverzeichnis entsprechen:

cordovaProjekt\platforms\android\build\outputs\apk\android-debug.apk

Nun kann die Datei testweise auf ein Android-Gerät übertragen, installiert und ausgeführt werden.

3.4.7■ Zusammenfassung

Anlegen eines ProjektesAngabe von Projektverzeichnis, App-ID und -Namen:

cordova create cordovaProjekt com.beispiel.hallo MeineErsteApp

Aufbau des Projektes � config.xml: Konfigurationsdatei � hooks: eigene Skripte für den Bauprozess (z. B. für die Minimierung und/oder Paketie-rung einzelner App-Komponenten)

� platforms: Quellen für die unterstützten Plattformen, um die Anwendung zu generieren � plugins: zusätzlich eingebundene Erweiterungen der nativen Schnittstelle � www: eigentliches Verzeichnis der Anwendung

� index.html: Einstiegspunkt der App, der alle benötigten Quellen (u. a. cordova.js) ein-bindet

� css: für das Styling relevante Dateien � img: Ordner für benötigte Bilder � js: JavaScript-Quellen

Hinzufügen und Entfernen von PlattformenAngabe der Plattformnamen (z. B. Android, iOS):

cordova platform add android [ios, ...]cordova platform remove android

Ausführen und Testen der Anwendung � Ausführen der Anwendung im Browser durch Öffnen der index.html � Ausführen und Testen mit nativen Funktionen: cordova serve android

Symbole$apply 32$broadcast 116$cordovaCamera 311$digest 32, 125$dirty 103$emit 116$error 103, 109$even 92$filter 321$first 91$fromIndex 225$get 53$http 52, 141, 176$index 91$interval 125$invalid 103$ionicActionSheet 248$ionicAnalytics 323$ionicBackdrop 253$ionicConfig 266$ionicConfigProvider 266$ionicGesture 260$ionicHistory 213, 306$ionicListDelegate 229$ionicLoading 251$ionicLoadingConfig 253$ionicModal 235, 306$ionicNavBarDelegate 207$ionicPlatform 265$ionicPopover 244$ionicPopup 239$ionicScrollDelegate 219$ionicSideMenuDelegate 198$ionicSlideBoxDelegate 256

$ionicTabDelegate 218$ionicView 204$last 91$location 75$middle 91$name 103$odd 92$on 117$pristine 103$q 133, 287$resource 144$rootScope 31 f., 37$route 70, 74$routeChangeError 121$routeChangeStart 121$routeChangeSuccess 121$routeParams 75$routeProvider 70$routeUpdate 122$sce 295$scope 30, 41, 98$state 186, 306$stateChangeError 188$stateChangeStart 188$stateNotFound 188$stateParams 186$stateProvider 179$submitted 103$timeout 33, 123, 222, 287$toIndex 225$valid 103$viewContentLoaded 120$watch 126$watchCollection 127$watchGroup 129

Index

330   Index

AAbstract States 183Action Sheet 158, 248AJAX 140Android SDK 9, 12AngularJS 6, 35AngularJS 2.0 327apk 9App-Icon 326Ausführungsphase 39, 323

BBackbone.js 23Backdrop 158, 253Big Data 21BlanketJS 321bootstrap 38, 80Bower 177

CCamel-Case 59CDN 178CLI 6, 11Code-Coverage 321CodePen 164collection-repeat 227Commit 23, 149config 39, 53, 74config.xml 14, 169Constant 47, 54Content 158Contributors 23Controller 27, 30, 35, 40, 70, 74, 179, 185, 284Cordova 2, 6, 9 f.Cordova CLI 11, 153, 166 f.Cordova-Plugin 19

DData Mining 21Decorator 35, 58deferred 134Dependency Injection 45Direktive 35, 59

EE2E-Test 321ECMAScript 6 327Ember.js 23Epic 276Event 114EventController 261

FFactory 47, 52Famo.us 149Famous 149Filter 319Footer 154, 157Formular 102

GGeste 158, 259Git CLI 12, 167GitHub 23, 149, 168, 177Google CDN 36Grid 156GulpJS 170, 325

HHeader 154, 157

Iion-checkbox 233, 308ion-content 190, 218, 230 f.ion-delete-button 223ion-footer-bar 192ion-header-bar 192, 209ion-infinite-scroll 231ion-item 223ion-list 222, 281, 293ion-modal-view 235ion-nav-back-button 208ion-nav-bar 202, 206, 209ion-nav-buttons 209ion-nav-title 210ion-nav-view 201ion-option-button 226, 281, 300ion-pane 192

Index  331

ion-popup-view 244ion-radio 234ion-refresher 230, 288, 293, 300ion-reorder-button 225ion-scroll 218, 230 f.ion-side-menu 195ion-side-menu-content 195ion-slide 255ion-slide-box 254ion-spinner 259, 289ion-tab 214 f.ion-toggle 234ion-view 202 f.Ionic Analytics 163, 323Ionic Box 165Ionic CLI 151, 153, 166 f., 322ionicConfigProvider 203Ionic Creator 151, 153Ionic Deploy 163, 323Ionic Framework 6, 147, 154, 176ionic.io 152, 163, 170, 174, 283Ionic Market 151, 166ionic.Platform 263Ionic Play 164ionic.project 170Ionic Push 162, 323Ionic Showcase 165Ionic User 162Ionic View 164Ionic View App 152Ionic Web Client 322, 324Ionicons 161ipa 9IstandbulJS 321

JJBoss 150Jetbrain 150jqLite 38, 66jQuery 2, 22, 32, 66JSFiddle 164JSON 140, 284

KKarma-Test-Runner 321Karten 155

Keyboard-Plugin 162Knockout.js 23Konfigurationsphase 39, 179, 266Konstruktor 50

LLAMPP 171Loading 158

Mmenu-close 293MobileAngular UI 149Modal 158, 280Model 27 f.Model-View-Controller 26Model-View-ViewModel 28Modul 35 f., 179Multi-Views 180

Nnav-direction 212nav-transition 211Navigation 159Nested States 181ngAnimate 177, 315ng-app 37, 80ng-bind-html 296ng-blur 99ng-change 98ng-checked 101ng-class 85ng-click 41, 82ng-controller 40, 70, 80ngCordova 161, 310, 323ng-dirty 112ng-disabled 100ng-false-value 101ng-focus 99ng-hide 84ngHide 316ng-href 59, 73, 79, 82ng-if 83ngIf 316ng-include 43, 81ngInclude 316

332   Index

ng-init 95ng-invalid 112ng-maxlength 108ng-minlength 108ngMock 321ng-model 98ng-options 101ng-pattern 108ng-pristine 112ng-repeat 88, 227ngRepeat 316ng-required 108ngResource 144, 177ngRoute 59, 68, 75, 120, 180ngSanitize 176ng-selected 101ng-show 84ngShow 316ng-src 87ng-strict-di 46ng-style 86, 112ng-submit 97ng-submitted 112ngSwitch 316ng-true-value 101ng-valid 112ng-value 101ng-view 59, 72, 79, 81, 120, 180ngView 316NodeJS 11, 167novalidate 106NPM 11, 167, 177

OObjective-C 9One-Way Data Binding 27Open-Source 150otherwise 77

PPhoneGap 6, 9 f.PhoneGap Build 11PhoneGap CLI 11Plunker 164Popover 159, 244Popup 159, 239, 281

Promise 131, 184Protractor 321Provider 47, 52Pull-To-Refresh 230Push-Notifications 163

Rreject 134Release 23, 148 f.Resolve 134, 184Rootscope 30Routing 35run 39

SSaaS 141SASS 170, 325Scope 30, 40Scroll 159Seitenmenü 159, 194Sencha 2Service 35, 47, 284Shadow-DOM 327Sidemenu 279Single-PageApplication 22Slidebox 160, 254, 278Spinner 160, 258, 288Splashscreen 326State 179, 283State Parameter 184Supersonic 149Swift 9

TTabs 156, 160, 214Template 28, 35, 43, 70 f., 179, 284track by 93Two-Way Data Binding 28 f., 327TypeScript 327

UuiRouter 176, 179, 200 f.ui-sref 187uiSrefActive 188

Index  333

ui-view 180, 201Unit-Test 321User Story 275

VValue 47, 49View 27 f., 180View-Caching 203ViewModel 28

WWatcher 32, 126, 130Web 2.0 2, 21, 140Web Components 327when 70, 77

XXAMPP 171XCode 9 f., 12XML 140