Leseprobe Bengt Weiße AngularJS & Ionic Framework Hybride App-Entwicklung mit JavaScript ...

26 Pages·2015·1.91 MB·German

by  Bengt Weiße

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
Inhalt
Vorwort ................................................................ XI
1 Einführung ......................................................... 1
2 Das Ökosystem .................................................... 5
2.1 Die Technologien und ihre Abhängigkeiten ............................... 5
2.2 Die Technologien und ihre Aufgaben ..................................... 6
3 Apache Cordova und Adobe PhoneGap .............................. 9
3.1 Einführung .......................................................... 9
3.2 Entstehung und Entwicklung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.3 Installation .......................................................... 11
3.4 Umgang mit der CLI ................................................... 13
3.4.1 Das erste eigene Projekt ......................................... 13
3.4.2 Die Projektstruktur ............................................. 14
3.4.3 Eine Plattform hinzufügen ....................................... 16
3.4.4 Die Anwendung ausführen ....................................... 17
3.4.5 Plugins verwalten .............................................. 18
3.4.6 Die erste App bauen ............................................ 19
3.4.7 Zusammenfassung ............................................. 20
4 AngularJS .......................................................... 21
4.1 Einführung .......................................................... 21
4.1.1 Was ist AngularJS? ............................................. 21
4.1.2 Geschichte .................................................... 22
4.1.3 Warum AngularJS als Single-Page-Application-Framework? ........... 23
4.1.3.1 Entwicklungsaktivitäten .................................. 23
4.1.3.2 Die Gemeinschaft ....................................... 24
4.1.3.3 Der Trend .............................................. 25
4.1.3.4 Fazit .................................................. 25
4.1.4 Das Grundkonzept .............................................. 25
4.1.4.1 Das Entwurfsmuster MVC und One-Way Data Binding ......... 26
4.1.4.2 Das Entwurfsmuster MVVM und Two-Way Data Binding ....... 28
VI   Inhalt
4.1.5 Der Scope als Repräsentant des Data Binding in AngularJS ........... 29
4.1.5.1 Scopes ................................................. 29
4.1.5.2 Das Data Binding ........................................ 32
4.2 Die Komponenten ..................................................... 35
4.2.1 Die Bestandteile einer AngularJS-App ............................. 35
4.2.1.1 Übersicht .............................................. 35
4.2.2 Die Einbindung von AngularJS ................................... 36
4.2.3 Das Modul .................................................... 36
4.2.3.1 Die erste Anwendung .................................... 37
4.2.3.2 Bootstrap – der manuelle Anwendungsstart ................. 38
4.2.3.3 Konfiguration und Ausführung ............................ 38
4.2.4 Controller ..................................................... 40
4.2.4.1 Der erste Controller ...................................... 40
4.2.4.2 Das erste ViewModel ..................................... 41
4.2.4.3 Was ein Controller nicht ist ............................... 43
4.2.5 Templates ..................................................... 43
4.2.6 Abhängigkeiten und Dependency Injection ......................... 45
4.2.7 Services ...................................................... 47
4.2.7.1 Value .................................................. 49
4.2.7.2 Service ................................................ 50
4.2.7.3 Factory ................................................ 52
4.2.7.4 Provider ............................................... 52
4.2.7.5 Constant ............................................... 54
4.2.7.6 Abhängigkeiten zwischen Provider, Factory, Service und Value
im Detail ............................................... 56
4.2.7.7 Definition in der Konfigurationsphase ...................... 58
4.2.7.8 Decorator .............................................. 58
4.2.8 Direktiven .................................................... 59
4.2.8.1 Definition .............................................. 59
4.2.8.2 Einbindung ins Template ................................. 59
4.2.8.3 Aufbau einer Direktive ................................... 60
4.2.9 Routen mit ngRoute ............................................. 68
4.2.9.1 Einbindung ............................................. 69
4.2.9.2 URL ................................................... 69
4.2.9.3 Routen ................................................ 70
4.3 Wichtige Direktiven in AngularJS ....................................... 79
4.3.1 Eine Anwendung starten mit ngApp ............................... 80
4.3.2 Controller und Template ......................................... 80
4.3.2.1 ngController ............................................ 80
4.3.2.2 ngInclude .............................................. 81
4.3.3 Routen und dynamische Links .................................... 81
4.3.3.1 ngView . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
4.3.3.2 ngHref ................................................. 82
4.3.4 Reaktion auf Klicks mit ngClick .................................. 82
4.3.5 Elemente ein- und ausblenden .................................... 83
4.3.5.1 ngIf ................................................... 83
4.3.5.2 ngShow und ngHide ..................................... 84
Inhalt  VII
4.3.6 Dynamisches Stylen von HTML-Elementen ......................... 84
4.3.6.1 ngClass ................................................ 85
4.3.6.2 ngStyle ................................................ 86
4.3.7 Dynamische Bilder mit ngSrc einbinden ........................... 87
4.3.8 Schleifen mit ngRepeat .......................................... 88
4.3.8.1 Normale Verwendung .................................... 88
4.3.8.2 Spezielle Verwendung mit Start- und Endpunkt .............. 90
4.3.8.3 Besondere Eigenschaften ................................. 91
4.3.8.4 Umgang mit Duplikaten mit track by ....................... 93
4.3.9 Scope-Variablen mit ngInit initialisieren ........................... 95
4.3.10 Formulare und Eingabeelemente .................................. 96
4.3.10.1 Formulare abschicken – ngSubmit ......................... 97
4.3.10.2 Datenbindung von Eingabeelementen mit ngModel ........... 98
4.3.10.3 Reaktion auf Änderungen mit ngChange .................... 98
4.3.10.4 Reagieren auf den Fokus von Eingabeelementen
mit ngFocus und ngBlur .................................. 99
4.3.10.5 Deaktivieren von Eingabeelementen und Schaltflächen mit
ngDisabled ............................................. 100
4.3.10.6 Übersicht eingabetypenabhängiger Direktiven ............... 100
4.3.11 Zusammenfassung ............................................. 101
4.4 Formulare ........................................................... 102
4.4.1 Ein Formular .................................................. 102
4.4.2 Das Formular-Objekt ............................................ 102
4.4.3 Formvalidierung ............................................... 105
4.4.3.1 Browserbasierte Formvalidierung .......................... 105
4.4.3.2 Eigene Formular-Validierung mit AngularJS ................. 107
4.4.4 Zustandsabhängiges Stylen von Eingabeelementen .................. 112
4.4.5 Formulare für Eilige ............................................ 113
4.5 Events .............................................................. 114
4.5.1 Was sind Events? ............................................... 114
4.5.2 JavaScript-Events ............................................... 115
4.5.3 AngularJS-Events ............................................... 116
4.5.4 AngularJS-Events am Beispiel von ngRoute ......................... 120
4.6 Timeouts und Intervalle ............................................... 123
4.6.1 Timeouts ...................................................... 124
4.6.2 Intervalle ..................................................... 124
4.7 Watcher ............................................................. 125
4.7.1 Watcher-Typen ................................................. 126
4.7.1.1 Einfacher Referenz-Watcher ............................... 126
4.7.1.2 Erweiterte Watcher – Collection-Watcher .................... 127
4.7.1.3 Tiefen- bzw. Gleichheits-Watcher ........................... 128
4.7.1.4 Gruppen- bzw. Multi-Watcher ............................. 129
4.7.2 Hinweise zur Performance ....................................... 129
4.7.3 Entfernen von Watchern ......................................... 130
4.7.4 Überblick ..................................................... 131
VIII   Inhalt
4.8 Promises ............................................................ 131
4.8.1 Asynchronität ................................................. 131
4.8.2 Der Mann im Mond ............................................. 132
4.8.3 Promises in AngularJS .......................................... 133
4.8.4 Multiple Promises .............................................. 138
4.9 Kommunikation mit Schnittstellen ...................................... 139
4.9.1 Einführung .................................................... 139
4.9.2 Die Umsetzung in AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
4.9.3 AngularJS-Erweiterungen ........................................ 144
4.9.4 Abschluss ..................................................... 146
5 Das Ionic Framework ............................................... 147
5.1 Einführung .......................................................... 147
5.1.1 Was ist das Ionic Framework? .................................... 147
5.1.2 Die Geschichte ................................................. 148
5.1.3 Warum sollte Ionic zur Erstellung hybrider Apps genutzt werden? ..... 149
5.1.4 Zahlen und Fakten ............................................. 149
5.1.5 Der Einsatz von Ionic ........................................... 150
5.2 Ionic – nicht nur ein Framework ........................................ 151
5.2.1 Das Ionic-System im Überblick ................................... 151
5.2.2 Mitglied von Ionic.io werden ..................................... 152
5.2.3 Der Ionic Creator ............................................... 153
5.2.4 Das Ionic CLI .................................................. 153
5.2.5 Das Ionic Framework ........................................... 154
5.2.5.1 CSS-Komponenten ....................................... 154
5.2.5.2 JavaScript-Komponenten ................................. 157
5.2.6 Ionicons ...................................................... 161
5.2.7 ngCordova .................................................... 161
5.2.8 Keyboard Cordova-Plugin ........................................ 162
5.2.9 Backend-Services ............................................... 162
5.2.10 Der Ionic-Spielplatz – ein Online-Editor ............................ 164
5.2.11 Die Ionic View App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
5.2.12 Ionic Box – Entwicklungsumgebung für Android .................... 165
5.2.13 Ionic Showcase – zeig, was Du geschaffen hast ...................... 165
5.2.14 Ionic Market ................................................... 166
5.2.15 Ionic Lab ...................................................... 166
5.3 Das Ionic CLI ......................................................... 166
5.3.1 Einführung .................................................... 166
5.3.2 Installation .................................................... 167
5.3.2.1 Für Geduldige .......................................... 167
5.3.2.2 Für Eilige .............................................. 167
5.3.3 Umgang mit dem CLI ........................................... 167
5.3.3.1 Das erste Projekt anlegen ................................. 167
5.3.3.2 Die Projektstruktur ...................................... 168
5.3.3.3 Das Framework aktualisieren ............................. 170
5.3.3.4 Eine Plattform hinzufügen ................................ 170
Inhalt  IX
5.3.3.5 Die Anwendung ausführen ................................ 171
5.3.3.6 Plugins verwalten ....................................... 173
5.3.3.7 Bauen der Anwendung ................................... 174
5.3.3.8 Upload der Anwendung .................................. 174
5.3.3.9 Zusammenfassung ...................................... 175
5.4 Das Framework ....................................................... 176
5.4.1 Die Bestandteile ................................................ 176
5.4.2 Installation .................................................... 177
5.4.3 Einbindung .................................................... 178
5.4.4 Erweiterung des Routings mit dem uiRouter ........................ 179
5.4.4.1 Zustände statt Routen .................................... 179
5.4.4.2 uiView statt ngView ..................................... 180
5.4.4.3 Multi-Views ............................................ 180
5.4.4.4 Verschachtelte Zustände .................................. 181
5.4.4.5 Abstrakte Zustände ...................................... 183
5.4.4.6 Parameter .............................................. 184
5.4.4.7 Resolves ............................................... 184
5.4.4.8 Eigene Daten am Zustand speichern ........................ 185
5.4.4.9 Zustände im Controller ................................... 186
5.4.4.10 uiSref statt ngHref ....................................... 187
5.4.4.11 Events bei Zustandsänderungen ........................... 188
5.4.5 Die JavaScript-Komponenten ..................................... 190
5.4.5.1 Das Grundlayout ........................................ 190
5.4.5.2 Die Navigationsstruktur .................................. 200
5.4.5.3 Strukturierung der App durch Tabs ........................ 214
5.4.5.4 Eigene Scroll-Container .................................. 218
5.4.5.5 Erstellen dynamischer und performanter Listen .............. 222
5.4.5.6 Inhalte aktualisieren mit ionRefresher ...................... 230
5.4.5.7 Nachladen von Inhalten mit ionInfiniteScroll ................ 231
5.4.5.8 Formular-Elemente ...................................... 233
5.4.5.9 Modals – Dialogfenster mit $ionicModal .................... 235
5.4.5.10 Popups mit $ionicPopup .................................. 239
5.4.5.11 Popover mit $ionicPopover ................................ 244
5.4.5.12 Action Sheet – Funktionstafel mit $ionicActionSheet .......... 248
5.4.5.13 Lade-Layer mit $ionicLoading ............................. 251
5.4.5.14 Backdrop – Interaktionen mit der View unterbinden .......... 253
5.4.5.15 Bildergalerie und mehr mit der Ionic Slidebox ............... 254
5.4.5.16 Lade-Animationen mit ionSpinner ......................... 258
5.4.5.17 Einfaches Arbeiten mit Gesten und Events .................. 259
5.4.5.18 Informationen und Einstellungen des Gerätes
über ionic.Platform und $ionicPlatform ..................... 263
5.4.5.19 Konfiguration des Frameworks über $ionicConfig ............ 266
5.4.5.20 Weitere Werkzeuge ...................................... 270
X   Inhalt
6 Eine eigene Musikverwaltungs-App erstellen ........................ 275
6.1 Definition der Anforderungen ........................................... 275
6.2 Konzeption .......................................................... 278
6.3 Umsetzung .......................................................... 282
6.3.1 Grundlayout und Navigationsstruktur ............................. 282
6.3.2 Das Füllen der Views ........................................... 284
6.3.2.1 Demo-Daten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284
6.3.2.2 Das Dashboard .......................................... 285
6.3.2.3 Das Seitenmenü mit Genre- und Inhaltsseitenliste ............ 290
6.3.2.4 Ansicht einer Inhaltsseite ................................ 295
6.3.2.5 Musikliste .............................................. 297
6.3.2.6 Detailansicht eines Musikeintrags ......................... 302
6.3.3 Fazit ......................................................... 310
6.4 Nutzung der Kamera mit ngCordova . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310
6.4.1 Installation von ngCordova ....................................... 311
6.4.2 Installation des Kamera-Plugins .................................. 311
6.4.3 Nutzung der Kamera mit ngCordova ............................... 311
7 AngularJS und Ionic für Fortgeschrittene ........................... 315
7.1 AngularJS ........................................................... 315
7.1.1 Animationen .................................................. 315
7.1.1.1 CSS ................................................... 315
7.1.1.2 JavaScript .............................................. 316
7.1.2 Filter ......................................................... 319
7.1.3 Tests ......................................................... 321
7.2 Ionic Framework ...................................................... 322
7.2.1 Die Installation von Backend-Services ............................. 322
7.2.2 Stylen einer App mit SASS ....................................... 325
7.2.3 Das Generieren von App-Icons und -Splashscreens .................. 326
7.2.3.1 Icons .................................................. 326
7.2.3.2 Splashscreens .......................................... 326
8 Ausblick ........................................................... 327
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329
Vorwort
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/AngularIonic
Hier stehen alle Quelltexte aus dem Buch zur Verfügung:
ƒ die Listings: https://github.com/AngularIonic/Buch
ƒ die komplette Beispielanwendung: https://github.com/AngularIonic/MusikMax

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 2016
Bengt Weiße
3
Apache Cordova
und Adobe PhoneGap
■■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 Emulieren
Beide genannten Systeme benötigen die Entwicklungsumgebungen der zu unterstützenden
Plattform, damit sie aus dem Quellcode eine mobile Anwendung bauen können. Dies wird