Bengt Weiße. AngularJS & lonic. Framework. Hybride App-Entwicklung. mit JavaScript. und HTML5 HANSER

Transkript

1 Bengt Weiße AngularJS & lonic Framework Hybride AppEntwicklung mit JavaScript und HTML5 HANSER

2 Inhalt Vorwort XI 1 Einführung 1 2 Das Ökosystem Die Technologien und ihre Abhängigkeiten Die Technologien und ihre Aufgaben ' Apache Cordova und Adobe PhoneGap Einführung Entstehung und Entwicklung Installation Umgang mit der CLI Das erste eigene Projekt Die Projektstruktur Eine Plattform hinzufügen Die Anwendung ausführen Plugins verwalten Die erste App bauen Zusammenfassung 20 4 AngularJS Einführung Was ist AngularJS? Geschichte Warum AngularJS als SinglePageApplicationFramework? Entwicklungsaktivitäten Die Gemeinschaft Der Trend Fazit Das Grundkonzept Das Entwurfsmuster MVC und OneWay Data Binding Das Entwurfsmuster MWM und TwoWay Data Binding 28

3 Inhal Der Scope als Repräsentant des Data Binding in Angularis Scopes Das Data Binding Die Komponenten Die Bestandteile einer AngularJSApp Übersicht Die Einbindung von Angularis Das Modul Die erste Anwendung Bootstrap der manuelle Anwendungsstart Konfiguration und Ausführung Controller Der erste Controller Das erste ViewModel Was ein Controller nicht ist Templates Abhängigkeiten und Dependency Injection Services Value Service Factory Provider Constant Abhängigkeiten zwischen Provider, Factory, Service und Value im Detail Definition in der Konfigurationsphase Decorator Direktiven Definition Einbindung ins Template Aufbau einer Direktive Routen mit ngroute Einbindung URL Routen Wichtige Direktiven in Angularis Eine Anwendung starten mit ngapp Controller und Template ngcontroller nglnclude Routen und dynamische Links ngview nghref Reaktion auf Klicks mit ngclick Elemente ein und ausblenden nglf ngshow und nghide 84

4 4.3.6 Dynamisches Stylen von HTMLElementen ngclass ngstyle Dynamische Bilder mit ngsrc einbinden Schleifen mit ngrepeat Normale Verwendung Spezielle Verwendung mit Start und Endpunkt Besondere Eigenschaften Umgang mit Duplikaten mit track by ScopeVariablen mit nglnit initialisieren Formulare und Eingabeelemente Formulare abschicken ngsubmit Datenbindung von Eingabeelementen mit ngmodel Reaktion auf Änderungen mit ngchange Reagieren auf den Fokus von Eingabeelementen mit ngfocus und ngblur Deaktivieren von Eingabeelementen und Schaltflächen mit ngdisabled Übersicht eingabetypenabhängiger Direktiven Zusammenfassung Formulare Ein Formular Das FormularObjekt Formvalidierung Browserbasierte Formvalidierung Eigene FormularValidierung mit Angularis Zustandsabhängiges Stylen von Eingabeelementen Formulare für Eilige Events Was sind Events? JavaScriptEvents AngularJSEvents AngularJSEvents am Beispiel von ngroute Timeouts und Intervalle Timeouts Intervalle Watcher WatcherTypen Einfacher ReferenzWatcher Erweiterte Watcher CollectionWatcher Tiefenbzw. GleichheitsWatcher Gruppenbzw. MultiWatcher Hinweise zur Performance Entfernen von Watchern Überblick 131

5 nicht Entwicklungsumgebung zeig, ein VIII Inhalt 4.8 Promises Asynchronität Der Mann im Mond Promises in Angularis Multiple Promises Kommunikation mit Schnittstellen Einführung Die Umsetzung in Angularis AngularlSErweiterungen Abschluss Das Sonic Framework Einführung Was ist das Ionic Framework? Die Geschichte Warum sollte Ionic zur Erstellung hybrider Apps genutzt werden? Zahlen und Fakten Der Einsatz von Ionic Ionic nur ein Framework Das IonicSystem im Überblick Mitglied von Ionic.io werden Der Ionic Creator Das Ionic CLI Das Ionic Framework CSSKomponenten lavascriptkomponenten Ionicons ngcordova Keyboard CordovaPlugin BackendServices Der IonicSpielplatz OnlineEditor Die Ionic View App Ionic Box Ionic Showcase für Android 165 was Du geschaffen hast Ionic Market Ionic Lab Das Ionic CLI Einführung Installation Für Geduldige Für Eilige Umgang mit dem CLI Das erste Projekt anlegen Die Projektstruktur Das Framework aktualisieren Eine Plattform hinzufügen 170

6 Die Anwendung ausführen Plugins verwalten Bauen der Anwendung Upload der Anwendung Zusammenfassung Das Framework Die Bestandteile Installation Einbindung Erweiterung des Routings mit dem uirouter Zustände statt Routen uiview statt ngview MultiViews Verschachtelte Zustände Abstrakte Zustände Parameter Resolves Eigene Daten am Zustand speichern Zustände im Controller uisref statt nghref Events bei Zustandsänderungen Die JavaScriptKomponenten Das Grundlayout Die Navigationsstruktur Strukturierung der App durch Tabs Eigene ScrollContainer Erstellen dynamischer und performanter Listen Inhalte aktualisieren mit ionrefresher Nachladen von Inhalten mit ionlnfinitescroll FormularElemente Modais Dialogfenster mit $ionicmodal Popups mit $ionicpopup Popover mit $ionicpopover Action Sheet Funktionstafel mit $ionicactionsheet LadeLayer mit SionicLoading Backdrop Interaktionen mit der View unterbinden Bildergalerie und mehr mit der Ionic Slidebox LadeAnimationen mit ionspinner Einfaches Arbeiten mit Gesten und Events Informationen und Einstellungen des Gerätes über ionic.platform und SionicPlatform Konfiguration des Frameworks über $ionicconfig Weitere Werkzeuge 270

7 6 Eine eigene MusikverwaltungsApp erstellen Definition der Anforderungen Konzeption Umsetzung Grundlayout und Navigationsstruktur Das Füllen der Views DemoDaten Das Dashboard Das Seitenmenü mit Genre und Inhaltsseitenliste Ansicht einer Inhaltsseite Musikliste Detailansicht eines Musikeintrags Fazit Nutzung der Kamera mit ngcordova Installation von ngcordova Installation des KameraPlugins Nutzung der Kamera mit ngcordova AngularJS und lonic für Fortgeschrittene AngularJS Animationen CSS JavaScript Filter Tests lonic Framework Die Installation von BackendServices Stylen einer App mit SASS Das Generieren von AppIcons und Splashscreens Icons Splashscreens Ausblick 327 Index 329