Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Cross-Plattform-Apps mit Cordova, Ionic, TypeScript und Visual Studio

Ein neues Projekt mit der Vorlage "Blank" anlegen

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Mit der Vorlage für eine "Blank App" können Sie ein annähernd leeres Projekt starten. Diese Vorlage umfasst weder vordefinierte Controller noch ein Routing.
04:02

Transkript

Wenn Sie die Visual Studio Tools für Appache Cordova und die Ionic Erweiterungen für Visual Studio installiert haben, dann erhalten Sie einige neue Projektvorlagen zur Anlage von neuen Ionic Projekten. Diese finden Sie unter Datei Neu Projekt und hier einmal in den Bereichen Java Script, Apache Cordova Apps und hier sehen Sie die Vorlage für eine leere App, für eine App mit einem Seitenmenü und für eine App mit Tabs. Und die gleichen Vorlagen finden Sie noch einmal im TypeScript Ordner und dort auch unter Apache Cordova Apps. Hintergrund ist, dass die Vorlagen im JavaScript Ordner zur Entwicklung JavaScript nutzen, die Vorlagen im TypeScript Ordner eben TypeScript nutzen. In diesem Video möchte ich Ihnen die Blank Vorlage für TypeScript vorstellen. Dazu lege ich eine neue App an. Die nenne ich Blank App und wähle OK, um das Projekt zu erstellen. Sobald ich das Projekt angelegt habe, beginnt Visual Studio damit, Pakete zu installieren und Abhängigkeiten herunter zu laden. Diese Abhängigkeiten, die stehen in mehreren Dateien. Zum einen in der Datei bower.json. Hier finden wir die Frontend-Abhängigkeiten. Also zum Beispiel Ionic als Frontend-Framework. Darüber hinaus haben wir die Datei package.json und in der package.json finden wir Entwicklungsabhängigkeiten wie zum Beispiel bower als Frontend- Abhängigkeitsmanagement-Werkzeug, die gulp-sourcemaps, gulp-typescript zum Übersetzen von TypeScipt Code und noch einige andere Module. Diese müssen beim ersten Öffnen der Projektmappe erst einmal heruntergeladen werden. und das sehen wir auch, wenn wir im Ausgabefenster die Ausgabe auf Bower/Npm umschalten. Dann sehen wir, wie hier nach und nach die ganzen Pakete heruntergeladen werden. Abgesehen von diesen beiden Konfigurationsdateien für externe Abhängigkeiten, gibt es noch einige andere interessante Dateien und Ordner im Projekt. Wir haben hier oben zum Beispiel den Ordner App und im Ordner App gibt es die Datei app.ts und in dieser Datei steht der Code, den wir später entwickeln werden bzw., wenn wir weitere Dateien anlegen, würden wir diese als TypeScript Dateien in diesem Ordner hier anlegen und über einen sogenannten Gulp Task, der hier in der gulpfile.js definiert worden ist, wird dann später dieser TypeScript Code übersetzt und in den Ordner www js kopiert. Wir sehen, hier unten ab der Zeile 37, dass es den Task tsc gibt, der genau das macht, was ich eben erklärt habe. Er geht also hin und kompilliert die entsprechenden Dateien und kopiert die am Ende in das Ausgabeverzeichnis herein. Wenn ich jetzt die App einmal starte, dann sehen wir, dass die leere App an sich tatsächlich relativ leer ist. Wir bekommen nicht viel mehr als einen kleinen Startbildschirm, den wir jetzt auch gleich im Ripple Emulator sehen werden. Ja, wie eben schon gesagt, das Ganze ist erst mal relativ leer. Wir sehen also hier das ist unsere App, wir haben hier oben den Head-Bereich, wir haben einen Body-Bereich und das war es auch schon. Diese Blank App, die ich jetzt hier als Vorlage genutzt habe, die bietet sich also immer dann an, wenn wir das Projekt von Grund auf selbst gestalten möchten, wenn wir auch selber die Nagivation gestalten möchten, da innerhalb dieser App tatsächlich nicht wirklich etwas drin ist. Es gibt noch keine vordefinierten Controller, es gibt keine Navigationsstruktur oder Ähnliches.

Cross-Plattform-Apps mit Cordova, Ionic, TypeScript und Visual Studio

Steigen Sie in die App-Programmierung ein und kombinieren Sie die praktischen Tools.

2 Std. 45 min (23 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Exklusiv für Abo-Kunden
Erscheinungsdatum:14.11.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!