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

Einen einfachen Controller erstellen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Logik einer Bildschirmmaske wird unter Angular und somit auch unter Ionic in einem Controller implementiert. Dieser Film zeigt, wie ein solcher Controller als TypeScript-Klasse geschrieben wird.
07:41

Transkript

In meiner App möchte ich Kosten erfassen, die ich nicht hatte. Dazu stelle ich mir vor, dass ich einen Startbildschirm habe, der ungefähr so aussieht, wie dieser hier. Oben habe ich also ein kleines Label, darunter habe ich eine Eingabemöglichkeit, um einzugeben, was ich mir gespart habe, also die Beschreibung einzugeben. Dann kann ich den Preis eingeben und auf Sparen drücken. Jedes Mal, wenn ich auf Sparen drücke, soll die bisherige Summe hier unten aktualisiert werden. Außerdem möchte ich einen Button Details haben, mit dem ich zu einer Detailseite komme. Hier soll einfach eine Liste später sein der bisher gesparten Einträge. Das was Sie hier sehen, ist einfach nur ein Platzhalter. Natürlich brauche ich keine Nachrichtenliste, sondern ich brauche eine Liste der bisher gesparten Einträge mit entsprechender Preisangabe. Zunächst möchte ich mich auf die Startmaske konzentrieren. Und dazu werde ich nicht direkt mit dem UI anfangen, sondern, da wir eine Ionic App haben, und Ionic auf Angular basiert, möchte ich mit einem Controller starten. Die Maske nenne ich Home und dazu werde ich einen HomeController anlegen unter dem benötige ich ein Feld, das den Namen hält. Das könnte ich zum Beispiel Description nennen. Ein Feld für den Preis, dann eine Methode für den Sparen-Button. Die Details Aktion, die werde ich dann später umsetzen. Außerdem benötige ich noch ein numerisches Feld, was die aktuelle Summe hält. Ich wechsel also zurück ins Visual Studio und hier würde ich meinen Code nun in den Ordner App schreiben. Nun gibt es viele Entwickler, die machen sich hier einen Ordner Controller und einen Ordner Services. Die teilen also ihre App horizontal auf. Ich hingegen, mag es ganz gerne, meine App nach Features aufzuteilen, also ich habe den Home Bildschirm, ich habe den Details Bildschirm. Bedeutet, ich mache mir also einen Ordner Home. Hier kommt dann alles herein, was mit dem Homescreen, also der Startseite zu tun hat. Zu diesem Ordner werde ich nun eine neue Datei hinzufügen nämlich eine TypeScript Datei. Ich möchte mein Projekt nämlich gerne mit TypeScript umsetzen. Und das wird mein HomeController und darum bietet sich es an, die Datei auch HomeController zu nennen. Als erstes möchte ich in meiner App einen neuen Name Space einfügen. Dazu schreibe ich module und den nenne ich App.Home. Das deckt sich also mit meiner Verzeichnisstruktur, die wir hier sehen. Anschließend erstelle ich eine neue Klasse, nämlich die Klasse HomeController Und in dieser Klasse HomeController benötige ich jetzt einmal ein Feld TotalSaved, das ist also, was ich bisher gespart habe. Das ist vom Typ Number. Dann habe ich das Feld Price, das ist der Preis der Sache, die ich aktuell spare. Außerdem brauche ich ein Feld Description. Das ist vom Typ String und das dann die Beschreibung der Sache, die ich mir gespart habe. Dieses Feld TotalSaved, das möchte ich ganz gern im Konstruktor initialisieren. Also schreibe ich Constructor und in diesem Constructor definiere ich dann this.totalSaved gleich null sein soll. Dann benötige ich, wie gesagt, noch eine Methode, die beim Speichern ausgeführt wird. Die nenne ich einmal addItem, also public addItem und der Code, der hier ausgeführt wird, den halte ich im Moment ganz bewußt simpel. Ich ignoriere also die Tatsache, dass ich eine Bezeichnung eingebe, sondern ich erhöhe einfach nur den bisher gesparten Betrag und erhöhe das um den eingegebenen Preis. Außerdem leere ich das Feld Description wieder und leere auch den Preis wieder. Den Preis setze ich bewußt auf null und nicht auf die Zahl 0, was daran liegt, dass ich später im UI ganz gerne in dem Fall, wenn es leer ist, ein Watermark anzeigen möchte. Ich will also so grau unterlegt eintragen, was man hier reinschreiben kann und das kann ich nur machen, wenn das Feld wirklich komplett leer ist. Zu guter Letzt muss ich diesen Controller jetzt noch meiner App hinzufügen. Und meine App, wenn wir einmal hier reinschauen, die heißt aktuell Starter. Das finde ich, ist jetzt gar nicht so ein schöner Name für meine App. Deswegen nenne ich die mal lieber SavedIt und kann jetzt auch hier meinen Controller zu dieser savedIt App hinzufügen, indem ich hier unten nun sage, angular module und wie Sie hier sehen, erhalte ich IntelliSense und zwar eine relativ gute IntelliSense, da wir hier TypeScript benutzen und wir TypeScript halt eben eine sehr, sehr gute sehr leistungsstarke und vor allem eine korrekte IntelliSense erhalten. Also zum Modul savedIt möchte ich ganz gerne einen neuen Controller hinzfügen. Der Controller, der heißt HomeController und es handelt sich dabei um die Kasse HomeController. So, zu guter Letzt, gehe ich jetzt hin und werde hier im Ordner Index gleich noch die HomeController js einfügen und achte außerdem darauf, dass ich hier in meinem Body ng-app starter durch savedIt ersetze. Das war also Punkt Nummer 1. Jetzt kompiliere ich einmal und wie Sie jetzt sehen können, wird mir jetzt nach dem Kompilieren, da jetzt der TypeScript Compiler läuft, im Ordner js eine Datei HomeController angelegt und diese möchte ich dann auch gleich in meinem Script verweisen. Wir sehen also jetzt hier js, Home, HomeController.js und die Datei, die möchte ich jetzt hier ganz gerne verweisen. So, damit wäre der erste Schritt schon einmal erledigt. Ich habe also damit begonnen, dass ich nicht zuerst das UI gebaut habe, sondern dass ich zu allererst hingegangen bin und einen Controller angelegt habe. Dieser Controller hat alle Eigenschaften erhalten, an die ich meine Oberfläche später binden möchte. Außerdem habe ich die entsprechende Methode hinzugefügt, die ich aus dem UI später aufrufen möchte und ich habe dafür gesorgt, dass dieser Controller meiner App hinzugefügt wird. Diese App habe ich zuvor dann noch umbenannt. Das geschah in der App ts und ich habe dann innerhalb der index.html mein neues Script hinzugefügt und auch hier darauf geachtet, dass ich die App entsprechend umbenenne. Falls Sie sich wundern, woher jetzt hier die Home Datei kommt, das kommt im Endeffekt daher, weil in meiner Gulp Datei der task tsc aufgerufen wird, wenn ich kompiliere und tsc transpiliert das TypeScript und kopiert das entsprechend in einen Unterordner von unserem js Ordner.

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!