Sie sind hier
E-Book

AngularJS & Ionic Framework

Hybride App-Entwicklung mit JavaScript und HTML5

AutorBengt Weiße
VerlagCarl Hanser Fachbuchverlag
Erscheinungsjahr2016
Seitenanzahl345 Seiten
ISBN9783446448070
FormatePUB
KopierschutzWasserzeichen
GerätePC/MAC/eReader/Tablet
Preis27,99 EUR
ANGULARJS & IONIC FRAMEWORK //
- Für Entwickler mobiler Apps (nativ/hybrid), Web-Entwickler und -Agenturen, Studenten der Informatik-Studiengänge
- Mit vielen Beispielen und Tipps
- Entwicklung einer eigenen App
- Online: Landingpage zum Buch (Single-Page) und sämtliche Quelltexte aus dem Buch: Listings & komplette Beispiel-App
Dieses Buch bietet Ihnen einen umfassenden, professionellen Einstieg in die hybride App-Entwicklung mit AngularJS und Ionic. Mit AngularJS, dem Webframework von Google, programmieren Sie mit einer der neuesten Frontend-Technologien moderne Single-Page-Applications für das Web. Das Ionic Framework, eine Erweiterung von AngularJS, gibt Ihnen das Rüstzeug an die Hand, auch mobile Apps mit Webtechnologien plattformübergreifend zu realisieren.
Im Detail lernen Sie zunächst die nötigen Paradigmen sowie das Programmieren mit AngularJS kennen. Darauf aufbauend erhalten Sie eine grundlegende Einführung in das Ionic-Universum und eine mit vielen praktischen Beispielen versehene Erklärung des Frameworks.
Dann geht's in die konkrete Umsetzung: Sie entwickeln eine eigene Musikverwaltungs-App, bei der alle wichtigen Komponenten von Ionic zum Einsatz kommen wie z.B. Seitenmenüs, Tab-Navigation, optimierte Formulare und Listen.
Ein Extra-Kapitel vermittelt Ihnen spezielleres Wissen zu Themen wie Design-Umsetzung, Testen oder Nutzung von Ionic Backend-Services.
AUS DEM INHALT //
Cordova/PhoneGap:
Installation, Nutzung, CLI
AngularJS:
Konzepte, Routing // Controller, Service, Direktive //Formulare, Events //
Ionic Framework:
Installation, CLI, Komponenten, Routing
Beispiel-App Musikverwaltung:
Konzeption, Umsetzung, ngCordova
Fortgeschrittene Themen:
Animationen, Filter, Tests // Ionic-Services, SASS statt CSS, App-Icons und Splashscreens

Bengt Weiße ist Softwareentwickler und -architekt. Als Technischer Leiter bei einem Softwareunternehmen in Jena ist Bengt verantwortlich für die Entwicklung von mobilen Apps auf Basis des Ionic Framework, von Web-Apps mit AngularJS und von modernen Backend-Systemen mit NodeJS und MongoDB.

Kaufen Sie hier:

Horizontale Tabs

Leseprobe
4AngularJS
4.1Einführung

In den Anfängen des World Wide Webs dienten Webseiten zur simplen Präsentation von Informationen und Produkten. Dafür war die Erstellung auf Basis statischer Inhalte ausreichend. Über die Jahre haben diese Seiten jedoch neue Formen angenommen, denn Funktion und Bedienbarkeit wurden durch neue Trends und Standards bestimmt. Ein wichtiger Meilenstein dieser Entwicklung war das Web 2.0. Es entstanden Blogs, Foren, Wikis und soziale Netzwerke, um den Gedanken- und Wissensaustausch zwischen Menschen zu fördern. Die angebotenen Informationen konnten nicht mehr nur abgerufen, sondern diskutiert, bewertet und selbst bearbeitet werden. In diesem Stadium befindet sich das WWW auch heute noch. Dazu kommt die Anforderung, immer neue Geräte-Klassen zu bedienen. Das Spektrum umfasst neben Desktop-Rechnern und Laptops auch Wearables, Smartphones und Smart TVs.

Die Ergebnisse einer Produktsuche bieten heute nicht nur einen Link zur entsprechenden Webseite, sondern zeigen in den meisten Fällen auch direkt Bewertungen anderer Käufer an. In fast allen Online-Shops hat der Nutzer mittlerweile die Möglichkeit, gekaufte Produkte zu bewerten oder Fragen zu stellen. Dabei geht der Trend zu interaktiven Anwendungen bestehend aus dynamisch erzeugten Inhalten. Die zukünftige Entwicklung des Webs dreht sich vor allem um künstliche Intelligenz, Big Data und Data Mining. Dabei sollen Computer in der Lage sein, aus den riesigen und für den Menschen unüberschaubaren Datenmengen des Internets die relevanten und wichtigen Informationen herauszufiltern, um sie dem Nutzer zu präsentieren. Computer und Programme müssen selbst entscheiden, was wichtig ist und was nicht. So könnte eine Suchanfrage in Zukunft statt einem Link zu Wikipedia-Artikeln direkt die Antwort anzeigen.

4.1.1Was ist AngularJS?

Um im heutigen WWW eine hohe Interaktivität und Benutzerfreundlichkeit bieten zu können, braucht es Technologien, die genau das abbilden können. Hier spielt vor allem JavaScript eine große Rolle. Diese Programmiersprache wird schon seit vielen Jahren genutzt, um dynamische Anpassungen an Inhalten vorzunehmen und auf Nutzerinteraktionen direkt reagieren zu können. Zur Vereinfachung der JavaScript-Programmierung entstanden zahlreiche Frameworks. Zu den bekanntesten Frameworks in diesem Bereich zählt jQuery. Bei der Verwendung solcher JavaScript-Bibliotheken werden oft nur Teile einer Webseite dynamisch. Der Internetauftritt besteht meist weiterhin aus einzelnen Unterseiten, die aufgerufen und vom Browser neu geladen werden. Darauf folgte die Idee, alle Inhalte über eine einzige Seite zugänglich zu machen. Das bedeutet, dass die gesamte Interaktion auf einer Seite im Browser erfolgt. Es finden keine Seitenwechsel statt, an die der Anwender bisher gewohnt war. Dieses Konzept ist als Single-Page Application (kurz SPA, zu Deutsch Einzelseiten-Anwendung) bekannt. Für den Entwickler bedeutet das eine noch höhere Komplexität der Programmierung. Viele Probleme müssen gelöst werden. Zwei Schwerpunkte sind die Navigation auf der Seite sowie die Reaktion auf Benutzereingaben. Das Thema der Navigation ist äußerst wichtig, da die vom Browser angebotene Funktion, um vor oder zurück zu navigieren, keine Anwendung findet. Trotzdem muss sich der Anwender auf der Webseite, wie in einer normalen Anwendung auch, zwischen bestimmten Ansichten hin und her bewegen können.

An diesen Problempunkten setzt AngularJS an und bietet Entwicklern ein starkes Werkzeug, um sich auf die Programmierung der Funktionen der SPA konzentrieren zu können. Probleme wie Navigation und flexibles Reagieren auf Nutzereingaben sind bereits gelöst. Zusätzlich erhält der Entwickler eine Vielzahl an Hilfsmitteln, die das Erstellen einer SPA vereinfachen. Zusammengefasst ist AngularJS also ein JavaScript-Framework zur Erstellung von Single-Page Applications, welches sich immer größerer Popularität und einer stetig wachsenden Community erfreut. Mit AngularJS lassen sich moderne Webanwendung mit gängigen Technologien, wie JavaScript, HTML und CSS, umsetzen.

4.1.2Geschichte

Wie bei vielen neuen Technologien steht auch bei AngularJS ein großer Konzern hinter der Idee. In diesem Falle ist das Framework in den Hallen von Google entstanden. Jedoch war zunächst nicht die Erarbeitung eines Single-Page-Application-Frameworks beabsichtigt.

Der Entwickler Miško Hevery wollte sich neben seiner Haupttätigkeit bei Google auch im Bereich JavaScript weiterbilden und startete dazu mit der Entwicklung einer eigenen Bibliothek im Jahr 2009. Ziel des Frameworks war es, Webdesignern die Erstellung von komplexen Webseiten zu vereinfachen, indem das normale HTML-Markup um eigene Komponenten erweitert wird. Außerdem sollten oft benutzte und verschachtelte DOM-Strukturen wiederverwendbar gemacht werden. Im Browser werden die Markup-Erweiterungen dann zur Ausführungszeit mithilfe von JavaScript automatisch in ihre Ursprungsstruktur umgewandelt. Dadurch ist die Umsetzung der Code-Wiederverwendbarkeit auch in HTML möglich.

Bild 4.1 AngularJS Logo 2009 (links)1 und heute (rechts)

Den Durchbruch schaffte AngularJS zuerst Google intern. Miško Hevery kam in das Projekt Google Feedback. Wie der Name vermuten lässt, wurde dieses Produkt für das Anbringen von Anregungen und Kritik entworfen. Zum Zeitpunkt von Heverys Einstieg lief das Projekt nicht zufriedenstellend. Daraufhin schlug er vor, das komplette Produkt mit seinem Framework neu zu schreiben. Nach etwas Überzeugungsarbeit erhielt er schließlich die Erlaubnis und nach nur drei Wochen Entwicklung war Hevery fertig. Sein Ergebnis überzeugte auf ganzer Linie. In dieser kurzen Zeit schrieb er das Projekt um und reduzierte so die 17.000 Codezeilen auf nur circa 1.500. Danach wurde das Framework auch außerhalb von Google interessant. Immer mehr Funktionen wurden gewünscht und implementiert. So entstand aus einer simplen Idee ein mächtiges Werkzeug zur Erstellung von Single-Page Applications, dessen Beliebtheit immer weiter wächst.

4.1.3Warum AngularJS als Single-Page-Application-Framework?

Neben AngularJS existieren noch andere Single-Page-Application-Frameworks, die sich in der Fachwelt ebenfalls hoher Beliebtheit erfreuen. Beispiele dafür sind Backbone.js, Ember.js oder Knockout.js, deren Quellcode auch frei verfügbar ist. Alle drei bringen ähnliche Funktionalitäten mit, reichen aber nicht an den Umfang von AngularJS heran. Trotzdem steht außer Frage, dass sich mit allen auf ihre Art und Weise sehr gut SPAs entwickeln lassen. Daher wird an diesem Punkt darauf verzichtet, einzelne Funktionen miteinander zu vergleichen oder gar fehlende herauszuarbeiten. Stattdessen werden die Beliebtheit und Entwicklung der einzelnen Frameworks betrachtet.

4.1.3.1Entwicklungsaktivitäten

Anhand des frei verfügbaren Quellcodes und der Verwendung der Git-Versionierungs-Plattform GitHub können die Programmieraktivitäten leicht verfolgt und miteinander verglichen werden.

Tabelle 4.1 Vergleich der Entwicklungsaktivitäten von SPA-Frameworks

Stand 1. Juni 2015

AngularJS

Backbone.js

Ember.js

Knockout.js

Seit

3. Januar 2013

26. September 2013

24. April 2011

4. Juli 2010

Commits (gesamt)

6779

3017

9808

1375

Commits (April & Mai 2015)

ca. 134

ca. 65

ca. 392

ca. 53

Releases

139

22

119

35

Contributors

1243

258

494

56

Tabelle 4.1 vergleicht die Entwicklungsaktivitäten seit der Entstehung der einzelnen Repositories auf GitHub. Dabei werden die Code-Änderungen (Commits) gesamt und in den Monaten April und Mai im Jahr 2015, die bis dahin veröffentlichten Versionen (Releases) und die Anzahl an Personen, die bereits an den Projekten beteiligt gewesen sind (Contributors), miteinander verglichen. Seit Januar 2013 wurden am AngularJS Projekt 6779 Änderungen eingestellt, was nur noch von den 9808 von Ember.js übertroffen wird, wobei Ember.js schon deutlich länger existiert. Die anderen beiden Frameworks sind dagegen weit abgeschlagen, obwohl sie im Falle von Knockout.js schon deutlich länger auf GitHub verfügbar sind. Bei der Betrachtung der Commits im April und Mai stechen AngularJS und vor allem Ember.js deutlich hervor. Bei den Commits zählen jedoch jegliche Quelltextänderungen dazu. Als Beispiel könnte eine neue Funktion des Frameworks in einem Commit, aber auch über mehrere hinweg eingebaut worden sein. Am Ende entsteht in den meisten Fällen, wenn ein gewisser Entwicklungsstand erreicht wurde, eine neue Version. Diese werden bei GitHub als Releases geführt. Dort liegen wieder Ember.js mit 119 und AngularJS mit 139 an der Spitze. Ein ähnliches Bild zeigt sich beim Gegenüberstellen der Mitwirkenden an den Projekten. Nur führt hier mit einem enormen Abstand AngularJS mit fast 750 Entwicklern mehr als Ember.js, das immer noch auf beachtliche 494 kommt. Die Mitentwickler an einem Projekt sagen natürlich nicht nur etwas über die...

Blick ins Buch

Weitere E-Books zum Thema: Programmiersprachen - Softwareentwicklung

ASP.NET Shortcut

E-Book ASP.NET Shortcut
Format: PDF

Shortcut-Tipps für ASP.NET-Profis Die neue .NET-Version der Active Server Pages stellt eine Umgebung zur Entwicklung von Web-Applikationen im .NET-Framework bereit. Viele aus der Desktop-…

ASP.NET Shortcut

E-Book ASP.NET Shortcut
Format: PDF

Shortcut-Tipps für ASP.NET-Profis Die neue .NET-Version der Active Server Pages stellt eine Umgebung zur Entwicklung von Web-Applikationen im .NET-Framework bereit. Viele aus der Desktop-…

ASP.NET Shortcut

E-Book ASP.NET Shortcut
Format: PDF

Shortcut-Tipps für ASP.NET-Profis Die neue .NET-Version der Active Server Pages stellt eine Umgebung zur Entwicklung von Web-Applikationen im .NET-Framework bereit. Viele aus der Desktop-…

Programmieren lernen in PHP 5

E-Book Programmieren lernen in PHP 5
Format: PDF

Mit der Version 5 erreicht PHP einen bemerkenswerten Reifegrad, der PHP zu einer festen Größe in der Welt der Webprogrammierung macht. Gerade die leichte Erlernbarkeit macht PHP zur idealen…

Mathematik für Informatiker

E-Book Mathematik für Informatiker
Format: PDF

Die Informatik entwickelt sich in einer unglaublichen Geschwindigkeit. Häufig ist die Mathematik Grundlage von Neuerungen. Deshalb ist sie unverzichtbares Werkzeug jedes Informatikers und Pflichtfach…

Mathematik für Informatiker

E-Book Mathematik für Informatiker
Format: PDF

Die Informatik entwickelt sich in einer unglaublichen Geschwindigkeit. Häufig ist die Mathematik Grundlage von Neuerungen. Deshalb ist sie unverzichtbares Werkzeug jedes Informatikers und Pflichtfach…

Mathematik für Informatiker

E-Book Mathematik für Informatiker
Format: PDF

Die Informatik entwickelt sich in einer unglaublichen Geschwindigkeit. Häufig ist die Mathematik Grundlage von Neuerungen. Deshalb ist sie unverzichtbares Werkzeug jedes Informatikers und Pflichtfach…

Weitere Zeitschriften

FESTIVAL Christmas

FESTIVAL Christmas

Fachzeitschriften für Weihnachtsartikel, Geschenke, Floristik, Papeterie und vieles mehr! FESTIVAL Christmas: Die erste und einzige internationale Weihnachts-Fachzeitschrift seit 1994 auf dem ...

Menschen. Inklusiv leben

Menschen. Inklusiv leben

MENSCHEN. das magazin informiert über Themen, die das Zusammenleben von Menschen in der Gesellschaft bestimmen -und dies konsequent aus Perspektive der Betroffenen. Die Menschen, um die es geht, ...

Berufsstart Gehalt

Berufsstart Gehalt

»Berufsstart Gehalt« erscheint jährlich zum Sommersemester im Mai mit einer Auflage von 50.000 Exemplaren und ermöglicht Unternehmen sich bei Studenten und Absolventen mit einer ...

BIELEFELD GEHT AUS

BIELEFELD GEHT AUS

Freizeit- und Gastronomieführer mit umfangreichem Serviceteil, mehr als 700 Tipps und Adressen für Tag- und Nachtschwärmer Bielefeld genießen Westfälisch und weltoffen – das zeichnet nicht ...

Card-Forum

Card-Forum

Card-Forum ist das marktführende Magazin im Themenbereich der kartengestützten Systeme für Zahlung und Identifikation, Telekommunikation und Kundenbindung sowie der damit verwandten und ...

Computerwoche

Computerwoche

Die COMPUTERWOCHE berichtet schnell und detailliert über alle Belange der Informations- und Kommunikationstechnik in Unternehmen – über Trends, neue Technologien, Produkte und Märkte. IT-Manager ...

Eishockey NEWS

Eishockey NEWS

Eishockey NEWS bringt alles über die DEL, die DEL2, die Oberliga sowie die Regionalligen und Informationen über die NHL. Dazu ausführliche Statistiken, Hintergrundberichte, Personalities ...