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

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

Eine einfache View erstellen

Testen Sie unsere 2019 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Views dienen zur Darstellung von Bildschirmmasken. Wie man eine solche View unter Verwendung von Angular-Bindings erstellt, zeigt dieser Film.
06:59

Transkript

Für meine App, mit der ich die Kosten erfassen möchte, die ich nicht hatte, habe ich bereits einen Controller für meine Startseite erstellt. Das nächste, was nun noch fehlt, ist die Seite an sich zu erstellen. Und dazu wechsel ich in Visual Studio und da es sich um die Homeseite handelt, werde ich jetzt hier im Ordner Home unter App eine Datei home.html anlegen. Den gesamten Inhalt, der bereits in der Datei enthalten ist, den kann ich löschen, was daran liegt, dass ich hier eigentlich nur ein Fragment einer Seite laden muss, weil dieses Seitenfragment später in einen Seitenrahmen hereingeladen wird. Nun möchte ich damit starten, dass ich zuerst einmal einen Ionic View anlege, also schreibe ich ion-view und diesem View, dem gebe ich den Titel Home. Außerdem schreibe ich hier um den Content noch drumherum die Klasse padding, dann bekomme ich etwas bessere Abstände. Innehalb des Content Bereiches werde ich jetzt ein div platzieren von der Klasse list. und in dieses div werde ich jetzt nach und nach meine Elemente packen. Das erste, was ich habe, ist ein Label und dieses Label, das erhält die Klasse item, item input und item stacked stacked label und der Inhalt des Labels wird sein einmal ein span, nämlich die Überschrift heißt also span class = input label, das das ein span ist, was eine Beschriftung für ein Eingabefeld hat und die Beschriftung lautet: Das habe ich mir gespart. Außerdem benötigen wir auch noch ein Input-Feld, also schreibe ich input type = text denn ich möchte hier ganz gerne Text eingeben. Dann hätte ich ganz gerne einen Placeholder Text, also Text, der angezeigt wird, innerhalb dieses Feldes, solange der Benutzer noch nichts eingetippt hat. Hier schreibe ich rein, zum Beispiel einen Burger habe ich mir gespart. Und jetzt kann ich über das Data Binding von Angular dieses Input-Feld mit dem Feld Description aus meinem HomeController verbinden. Dazu schreibe ich ng-model ist gleich und nun schreibe ich vm.description Warum vm oder vm wie manche auch sagen? Das liegt ganz einfach daran, dass ich vorhabe, später die Controller as Syntax zu nutzen, bei der ich für den Controller einen Alias definiere und in der Regel nutzen wir hier vm für View-Model. So, über dieses Attribut hier habe ich jetzt mein View-Model verbunden mit meinem Eingabefeld und jetzt benötige ich als nächstes ein weiteres Eingabefeld für den Preis und ich kopiere mir einfach einmal die gesamte Struktur und schreibe jetzt hier rein, dass in diesem Label steht Preis und hier ist der Input vom Typ Number und der Placeholder ist zum Beispiel 0,99 und ich binde dieses Mal meine Model an die Eigenschaft price. Als nächstes hätte ich ganz gerne einen Button und dieser Button, der bekommt die Klasse button und dann button-full und button-positive und ich definiere hier, wenn jemand auf diesen Button klickt, dass ich dann über den View-Model die Methode addItem aufrufen möchte. Also genau die, die ich hier definiert habe. Der Text für diesen Button, der lautet: Jetzt sparen! So, als nächstes werde ich noch einmal so einen Bereich hier benötigen, nämlich die Ausgabe der bisher gesparten Summe. Heißt also, ich sage hier, bisher gespart und hier unten brauche ich jetzt kein Textfeld mehr, sondern ich kann hier ganz einfach ein weiteres span nehmen. Also im Endeffekt genau so ein Element, wie ich es hier auch habe. Und hier rendere ich nun aus meinem View-Model die Eigenschaft totalSaved. Wenn Sie sich jetzt vielleicht wundern, woher ich diese ganzen CSS Klassen hier kenne, dann sieht das natürlich nicht so aus, dass ich mir die alle selber ausgedacht habe oder die auch alle auswendig kenne, sondern diese CSS Klassen, die finden Sie sehr gut in der Ionic Dokumentation beschrieben. Diese öffne ich einmal schnell. Sie finden diese also unter ionicframework.com/docs und dann haben Sie hier die CSS Komponenten und dann haben wir hier zum Beispiel die Buttons und dann sehen Sie hier, dass ich also eben diesen button positive benutzt habe und jetzt sehen Sie auch hier die einzelnen CSS Klassen, die ich nutzen muss. Genauso wie das im Fall vom Listen der Fall ist oder wie das im Fall von Formularen der Fall ist. Das ist eigentich sehr schön, sobald Sie nämlich hingegen und ein wenig durchscrollen, sehen Sie rechts immer, wie das Ganze ausschaut und links sehen Sie das entsprechende Markup und das können Sie sich dann kopieren und dann einfach modifizieren. Ansonsten habe ich bisher Folgendes gemacht: Ich habe also mir hier unter Home eine neue Datei angelegt, home.html, das war mein View. Innerhalb dieser home.html habe ich jetzt ein wenig Markup geschrieben und in diesem Markup habe ich zum Beispiel Angular Attribute genutzt, um eine Datenbindung zwischen meinem Controller und meinem View herzustellen.

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!