Ionic 5 Tutorial für Beginner | Angular + Cordova [deutsch]
Brauchst Du ein Ionic Tutorial, um eine App zu entwickeln?
Mit Ionic kannst Du effizient und schnell mit 1x Code schreiben und für Android, IOS und Windows Phone entwickeln.
Bereit für Deine 1. App?
Dieses Tutorial gibt Dir einen Einblick in die Grundlagen des Ionic Frameworks.
Ionic Tutorial - Inhalt - 6 Schritte zur Hybriden App
1. Kapitel
Herausforderung & Ziel: Wir bauen eine Ionic App
Wir bauen eine "freundliche, anständige" Ionic App, die Dich mit Deinem Lieblingsgruß begrüßt.
"Mehr als ein Hello-World-Projekt - einfach erklärt"
Das Tutorial gibt Dir eine Einführung in das Entwickeln einer App mit dem Ionic Framework.
Mit Ionic entwickelst Du für IOS, Android und Windows Phone zu gleich. Hört sich das gut an?
Deine "freundliche" App - Ionic Tutorial mit Praxis Beispielen

Voraussetzung: Dein Wissen
- Du solltest schon einmal etwas programmiert haben. z. B. Java, Python oder jede andere Sprache
- HTML und / oder CSS sind Kenntnisse vorteilhaft
- Admin Rechte, um Programme zu installieren und deinstallieren
Technische Voraussetzungen: Notwendige Grundlage für Ionic
Für den Beginn reicht Node.js und ein Editor aus.
Wenn Du Apps für Deine Geräte builden, willst brauchst Du Android Studio oder Xcode.
- (Notwendig) Node Package Management: node.js zur Installation von Ionic
Node Package Management - Ionic Tutorial - (Notwendig) Einen beliebigen Code-Editor / Windows Editor. Ich liebe Visual Studio Code, da es für den Editor Erweiterungen gibt.
VS Code
Erweiterungen [für fortgeschritten Nutzer sinnvoll]
- (Optional) installiere den Java JDK, der die Entwicklungsumgebung für Android Studio für die Erstellung eine Android App zur Verfügung stellt.
JDK - (Optional) Anmeldung bei Ionic Basic for Free: Damit wird der Build-Prozess vereinfacht. Dort kannst Du Icons und Ladebildschirme formatieren lassen.
Ionic Framework - Ionic Tutorial - (Optional) Installiere Dir Xcode, um eine iOS App auf Deinem Geräte zu installieren.
- (Optional) Windows: Installiere Android Studio bzw. den Android SDK, um eine Android App für den Google Play Store hochzuladen.
- (Optional) Windows: Lege die Umgebungsvariablen für Java, Gradle und Android Studio an, um einen funktionierenden Build-Prozess anzustoßen.
Umgebungsvariablen
2. Kapitel
Konzept: HTML, CSS, Angular 9
Um eine universelle Ionic App zu erstellen, schreiben wir die Ionic App mit HTML, CSS und Angular als TypeScript.
Das klingt im ersten Moment viel - wir brauchen ein paar Konzepte uns anzusehen.
Was ist Ionic Framework und hybride Apps?
Stell Dir vor:
Du nimmst etwas HTML, CSS und Angular und code. Du baust eine Ionic App, die in dem Apache Cordova Container auf den drei bekanntesten Plattformen IOS, Android und Windows Phone läuft.
FocusOS verwandelt mit 1 Klick Computer + Handy
in einen ablenkungsfreien Arbeitsplatz
Mehr Erfahren
Drifty entwickelte Ionic, wofür das Unternehmen 1 Million US-Dollar Startkapital von den Arthur Ventures im März 2014 erhalten hat. Ende November 2013 veröffentlichten die Entwickler die erste Alpha-Version von ionc.
Ressource: Angular Dokumentation
Ionic gilt als ein hybirdes App-Framework mit dem Du in sehr kurzer Zeit stabile und performante Apps bauen kannst. Ionic läuft auf Deinem Smartphone in eine Art Browser, der auf die Sensoren des Handys mit Ionic Native zugreifen kann:
- Kamera
- Geschwindigkeitssensor
- Push-Notifikation
- Kompass
- ...
Das macht Ionic zu einem extrem erweiterbaren und nützlichen Framework.
Ordner und Orientierung im Ionic Projekt

So findest Du Dich in der Ionic Struktur zu recht
- src/app- wichtigster Ort zum Programmieren. Hier sind alle Ansichten der App gespeichert
- nodes_modules - die Hintergrund-Bibliotheken von JavaScript
- assets - für alle Bilder, Audio und co, die in Deine App eingebunden werden sollen
- Pipes / Providers / Themes - eigene "Erweiterungen"
- app-routing.module.ts gibt die URL im Browser vor
- app.component.scss, global.scss und theme/variable.scss sind globale Stylesheet-Dateien, die Du modifiziest, um das Ausehen zu ändern
Wichtigste Dateitypen im Ionic Projekt
- .ts - TypeScript Datei - damit läuft die Seite dynamisch und tritt in Aktion
- .html - das Design Template - Struktur und Aufbau der Seite
- .scss ist eine Style Sheet Datei, in der Du Designanpassung wie bei normalen Webseiten vornehmen kannst
Wichtige, spezielle Dateien
- ts - Einbindung der Module des gesamten Projekts z.B. Kamera Funktion - neue Ansichten
- scss - Definition der Farben, Themas und Designs, die über die gesamte App gelten sollen
- html - in dieser Datei wird das untere Tab Menü dargestellt. Hier kann man Icons, Text und Verlinkung zu den Seiten anpassen
- html - die erste Ansicht, wenn man die App öffnet
- xml - App-spezifische Einstellungen, Autoren-Kommentare, Einbindung von Screenshots und Icons
- json - Datenabsicherungsstruktur
3. Kapitel
Grundlagen: Wie funktioniert Ionic?
In diesem Abschnitt des Ionic Tutorials klären wir zum besseren Verständnis, wie die Sprachen in dem Ionic Framework zusammenarbeiten.
Du erfährst auf welchen Grundlagen Ionic aufbaut und wie es die verschieden Sprachen verwendet.
HTML - Die Struktur Deiner App
Die HTML-Datei definiert die Struktur Diener App und verweist bei einem Aktionselement auf den TypeScript-Code (Button-Link). Viele eigene Ionic-Tags beginnen mit dem Präfix <ion- .
Ionic kann für Dich die wesentlichen Steuerungselemente nach dem Baukasten-Prinzip erstellen. Du brauchst nicht einen Button für iOS und Android erstellen. Ionic generiert für Dich beim Builden das gewünschte gestylte Endprodukt.
In die HTML-Datei kannst Du an jeder Stelle Angular Code einbauen.
Schreibst Du in die HTML-Datei {{example}}
, kannst Du die Variable im TypeScript definieren mit example:string = "Hallo Welt";
Der Browser gibt Dir Hallo Welt aus.
Rufe Methoden innerhalb der doppelt geschweiften Klammern {{sayHello()}}
, die Du in der passenden TypeScript-Datei definiert hast. sayHello()
gibt mit dem return
einen String zurück und Angular schreibt den String an die Stelle in die HTML-Datei.
sayHello(){
return "Hello";
}
Du kannst andere HTML-Tags in der Datei nutzen und diese mit CSS gestalten. Nutze die zugehörige .scss Datei für die Gestaltung der Seite mit CSS. Das dient der Übersicht. Mit ids (#header) und classes (.buttons) kannst Du die Verbindung zu dem .scss Datei herstellen.
TypeScript - Was soll Deien App machen?
Mit TypeScript, einer JavaScript-Weiterentwicklung von Microsoft, schaffen wir das Fachkonzept, die logische Struktur unserer App, die Buttons zum Leben erweckt. Wer Javascript kennt, der ist hier klar im Vorteil, weil Javascript gültiger TypeScript-Code ist.
Let's begin: Grundlagen. Warm-up
- Einfache Javascript Ausgabe nach Laden der App in
ionViewDidLoad()
ionViewDidLoad() { console.log('ionViewDidLoad DetailPage'); }
- if-Anweisung für die Geldsorte
getCurrencySymbol(currency) { if (currency == "EUR") { return "€"; } else { return "$"; } }
- Typischer Konstruktor, der Module einbindet und Parameter annimmt
constructor( public navCtrl: NavController, public navParams: NavParams, private http: HttpClient, ) { this.expenseNumber = this.navParams.get("expenseNumber"); }
- eine Funktion, mit der man eine neue Ansicht "aufpoppen" lässt
openEditPage() { this.navCtrl.push(EditPage); }
TypeScript kann Datensätze in der Form von JSON in die App laden.
Provider laden über einen relativen oder absoluten Link JSON-Dateien in die App. Ein HTTP-POST-Anfrage sendet Daten zum Server, während eine GET-Anfrage die Daten abfragt.
4. Kapitel
FocusOS verwandelt mit 1 Klick Computer + Handy
in einen ablenkungsfreien Arbeitsplatz
Mehr Erfahren
Coden: Jetzt wird's ernst.
Ich hoffe, Du konntest npm und ionic installieren, um einen schnellen und guten Start mit Ionic zu haben.
Jetzt wollen wir zusammen den ersten Code Zeilen für Ionic schreiben.
(Wenn nicht, schreibe in die Kommentare Deine Installations-Probleme)
Einrichtung eines Ionic-Projekts
- Installiere Ionic mit dem node.js Paket Manager global über Dein System über das Windows Terminal mit Admin Befehlen
npm install -g ionic cordova
- Navigiere mit cd zu dem Ordner, in dem Du das Projekt einrichten willst
cd OrdnerName
- Erstelle ein neues Projekt mit
ionic start myFirstApp tabs --type=angular
- Wenn die Meldung kommt
"Would you like to integrate your new app with Cordova to target native iOS and Android?"
Wähley
- Die Einrichtung eines Ionic Projekts dauert einen Moment (1-10 Minuten je nach Internet und PC)
Ionic Tutorail - Bei der Meldung
"Install the free Ionic Pro SDK and connect your app?"
Wählen
- Navigiere in den neuen Projektordner mit
cd myFirstApp
- Schauen wir uns mal das Ergebnis an und starten die blanke Ionic App in Deinem Browser (Vivaldi, Firefox, Chrome sind optimal).
ionic serve
- Drücke
F11
und wechsele in den Handy-Modus.


Für das Entwickeln ist meistens ionic serve besser, weil der Befehl schneller ist und mit dem Developer Tools von Chrome besser nutzbar ist.
ionic serve
Wenn Du alles richtig gemacht hast, sieht es so aus wie oben im Bild.
Das Programmieren der hybriden App mit Ionic
Falls Du Probleme bei der Einrichtung hattest, schreibe es bitte in den Kommentar unten. Ich werde so schnell wie möglich auf Deine Frage reagieren.
Bei erfolgreicher Einrichtung des Projekts öffne die Datei tab1.page.html
und säubere die Datei so, dass wir mit arbeiten können:
Jetzt erstellen wir einen Button und ein Textfeld zur Texteingabe und einen erkennbaren Titel. Der Button ist abgerundet mit dem Attribut round
und die Button-Farbe wird durch die Sekundärfarbe color="secondary"
festgelegt.
Mit den ngModel speichern wir die Eingabe von der Begrüßung in die Variable greeting
, die wir vorher in der TypeScript-Datei definiert haben.
tab1.page.ts - Verweis mit Angular Route
Im nächsten Schritt bearbeiten wir den zweiten Tab. Dort soll der Button Deinen Namen weiterleiten und dort anzeigen.
Dafür brauchen wir eine Angular Route. Eine Angular Route funktioniert wie eine URL. Du verweist durch die navigate
-Funktion auf den Tab tabs/tab2
und fügst den Namen als einen Parameter an. Auf der anderen Seite nimmt die tabs2.page.ts
den Parameter entgegen und gibt diesen aus.
tab2.page.ts - Ausgabe des Namens
Die Ausgabe in tab2.page.html über eine Angular markieren die geschweiften Klammern{{}}
. Noch etwas CSS und schon begrüßt die App Dich.
tab2.page.html
Das Ergebnis: Deine Ionic App ist "freundlich"
Und so sieht das Ergebnis aus:

Fertige App Seite 1

5. Kapitel
FocusOS verwandelt mit 1 Klick Computer + Handy
in einen ablenkungsfreien Arbeitsplatz
Mehr Erfahren
Erweiterungen: Wie kann ich die App erweitern?
Hast Du noch nicht genug von dem Ionic Tutorial?
Oder möchtest Du noch mehr von Ionic kennenlernen?
Dann zeige ich Dir in diesem Abschnitt, wie Du Deine App und Dein Wissen ausbauen kannst.
Wichtigste Terminal-Befehle für das Ionic Framework
Bei Ionic kannst Du viel mit dem Terminal arbeiten. Das Live Reload erleichtert das Entwickeln enorm, da Du nicht immer neu starten musst.
Wenn Du ionic serve
ausgeführt hast und zugleich die Datei bearbeitest, wird beim Speichern der Datei die Ionic Seite im Browser komplett neu geladen.
Das spart eine Menge Zeit.
Hier sind noch weitere interessante Befehle, die Du beim Programmieren mit Ionic gebrauchen könntest.
ionic serve // starte die Browser Ansicht
ionic lab // Starte die "schönere" Browersansicht
ionic gerneate page meineNeueSeite // Generiert Seite
ionig gnerate provider getMyData // neue Daten
Wesentiche Änderung von Ionic 5
Der Sprung von Ionic 4 zu 5 ist nicht riesig.
Update Dein Angular Controller und Du bist Uptodate. Ionic unterstützt Angular, React, Vue und pures JavaScript
Ionic verbessert mit Ionic 5:
- Dunkleres und optisch besseres iOS Darkmode für Ionics Segment
- App-Header kann in mit verschieden großen Titeln
- Große Titel für den iOS Style
- Wische-um-zu-schließen-Modal
- Seitenmenu für iOS (wie bei Android)
- Neue Ionic Animationen mit eigenen Klassen. Diese basieren auf JavaScript und viel CSS.
- Neue Version von Ionic Icons 5
- Einfaches Anpassen mit der Shodow DOM. Jetzt sind der Zurück-Button, Karte, Segmente und die Teilungs-Ansicht leichter veränderbar. Wenn Du Dich im Allgemeinen über die Shadow DOM informieren willst, finde weitere Informationen in den Mozilla Docs.
- CSS Utilities sind anders benannt: Statt text-center tippst Du in Ionic 5 class="ion-text-center"
Die Veränderungen an den Ionic Komponenten kannst Du in GitHub unter „Wesentliche Veränderung von Ionic 4 auf 5“ nachlesen.
Ionic 5 ist kompatibel mit Angular 9.
Angulars neuste Version kommt ohne EntryComponentes aus. Starte Ionic mit ionic serve oder ng serve.
Wenn Du noch Ionic 4 nutzt, kannst Du Angular updaten mit dem Befehl
npm i @ionic/[email protected] –save
ionic serve
FocusOS verwandelt mit 1 Klick Computer + Handy
in einen ablenkungsfreien Arbeitsplatz
Mehr Erfahren
6. Kapitel
Fazit: Gratulation zur 1. App
Du hast es geschafft. Deine erste eigne Ionic App ist fertig. Nach all den Installationen und Code Zeilen, kannst Du Dir eine Pause gönnen.
Damit das Tutorial noch besser wird, freut es mich, wenn Du unten das Tutorial kommentierst oder mit Deinen Freunden teilst.
- Schreibt von Fehlern, die auftreten ...
- Textstellen, die undeutlich geschildert wurden
- Kritik mit Verbesserungsvorschlägen ...
- Vorschläge für neue Post ...
- Installationsprobleme ...
- Deine Erweiterungen der 1. Ionic App ...
Danke. Ich freue mich auf Dein Feedback
Verpasse nicht
- Angular Tutorial Deutsch - Angular lernen für…
- ngFor in Ionic 5 + Angular 9 > Beispiel im 6…
- Ionic Native Camera + Storage im 6 Schritte Tutorial…
- CORS Ionic - 3 Lösungen Proxy, QuickFix, Header [Angular]
- ngStyle + ngClass > Angular Dynamische Styles mit…
- Splunk 8 Tutorial Beginner - Dashboard + Beispiele (2021)
Guten Tag
Danke für die gute Anleitung, alles scheint gut zu laufen, ausser wenn ich im Browser localhost:8100/ionic-lab eingebe, erscheint eine weisse Seite (Fehler: Verbindung fehlgeschlagen).
Noch aufgefallen:
– Unter MyApp/src habe ich eine Datei index.html und im Unterordner app app.compenent.html, aber nirgends eine home.html
Gebe in die Konsole zuerst ionic serve ein, um Ionic zu starten.
Dann kannst Du die App im Browser unter localhost:8100/ aufrufen
Wie binde ich PHP ein?
Ionic ist nur JavaScript. Aber Du kannst ein PHP-Backend auf Deinem Server schreiben. Mit HTTP-GET kannst Du z. B. Datenbanken auslesen.
Hi,
dein Tutorial ist klasse, aber wenn ich ein Projekt mit
ionic start MyApp tabs oder
ionic start MyApp tabs –type=ionic-angular
starte, ist das niemals in ionic 4 sondern immer 3.9.x
weißt du zufällig, wie man ionic v projekte startet?
Hallo Alex,
probiere mal:
npm install -g @ionic/cli
ionic start
Ein Ionic-4-Projekt erkennst Du an den Tag.
Hallo bei mir wird die Navigation nicht angezeigt bzw zeigt mir fehler…
Er sagt zu mir Router gibt es nicht: es handelt sich um diese Zeile:
export class ListPage {
name: String;
constructor(public router: Router) { }
openNextPage() {
this.router.navigate([‚page/neuinstallation-repeater‘, { name: this.name }])
}
}
Danke im Vorraus!
Gruß Jasmin
Hallo Jasmin,
hast Du den Router in auch oberhalb importiert? Was ist mit der Fehlermeldung?
Könnte es sein, dass Deine Beschreibung (z.B. „home.html“) und Deine Code-Beispiele (z.B. „tab1.page.html“) nicht ganz zusammenpassen? Scheint mir, dass Du hier zwei unterschiedliche Templates vermischt hast, oder?
Aber das Tutorial ist soweit gut. Dem kann ich (einigermaßen) folgen.
Hallo Reiner,
habe die Textstellen angepasst. Danke für den Hinweis. Das Tutorial habe ich von Ionic 3 auf Ionic 4 upgeradet.
Für Alle die hinter einem Proxy hängen:
https://ionicframework.com/docs/cli/using-a-proxy
Für Alle bei denen Ionic.ps1 (Powershell-Script) blockiert wird:
https://www.borncity.com/blog/2010/02/24/powershell-skripte-lassen-sich-nicht-ausfhren/
Danke für die Links!
Hallo, bei:
Test
erscheint folgende Fehlermeldung: Identifier ‚openNextTab‘ is not defined.
Was kann ich tun?
Danke und viele Grüße
Hallo Mike,
ich kann aus Deiner kurzen Beschreibung nur ableiten, dass Du eine Ionic Page nicht richtig in app.module.ts referenziert hast. Für eine sichere Antwort brauche ich von Dir Code und die gesamte Fehlerbeschreibung. Sonst muss ich raten 🙂
Grüße
Steffen
Kannst Du die gesamte Fehlermeldung und den Code zu openNextTab in den Kommentar schreiben. Das hilft mir weiter…
Hallo, ich hoffe die Seite ist noch aktuell. Ich möchte mit Ionic eine App programmieren lassen die unter iOS und Android läuft, sprich hybrid. Die Serveranbindung würde ich über Firebase realisieren. Weiß jemand wo ich die passenden Sdks finde für die Firebase Produkte? Gebraucht werden folgende:
Analytics, Crashlytics, Authentication, Dynamic Links, Cloud Messaging, Storage und Firestore.
Ein danke schon Mal im vorraus
Ja – du kannst eine solche App mit Ionic erstellen:
Analytics – Google Analytics
Crashlytics – Loganlayse z. B. mit Graylog
Authentication – Schau Dir mal die Ionic Super App an
Dynamic Links – Was meinst Du damit? Ionic verwaltet das Routing
Cloud Messaging – Du kannst die App mit einem Server kommunizieren lassen
Storage – Ionic Native Storage ist gut
Firestore – ist möglich