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

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

List View anlegen

Testen Sie unsere 2021 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Die Darstellung tabellarischer Daten in einer Liste ist eine häufige Aufgabe in modernen Geschäftsanwendungen. Die Umsetzung unter Ionic verfolgen Sie in diesem Video.
08:10

Transkript

In meiner App kann ich bereits Ausgaben erfassen, die ich noch nicht hatte. Wenn ich also hier einen Burger eintrage, für 99 Cent, dann wird dieser in einer Liste abgespeichert. Dieses Abspeichern, das erfolgt in meinem SavedItemsService, nämlich mit der Methode "addItem". Nun würde ich ganz gerne einen Bildschirm erstellen, in dem ich auch eine Auflistung der bisher gesparten Einträge erhalte. Dazu lege ich mir zuerst einen Controller an. Dies geschieht im Ordner savedItems. Und ich lege mir hier eine neue TypeScript-Datei an. Diese nenne ich "SavedItemsController". Dieser Controller befindet sich im Namespace "App.SavedItems". Und er steht in der Klasse "SavedItemsController". Dieser SavedItemsController, der benötigt jetzt ein Array von gesparten Einträgen. Das nenne ich "savedItems". Und das brauche ich, damit ich daran an der Oberfläche später binden kann. Also erzeuge ich hier mein Array. Und das ist ein generisches Array vom Typ "SavedItem". "SavedItem", das war meine Model-Klasse. Ich habe außerdem einen Konstruktor. Und an diesen Konstruktor übergebe ich jetzt einen SavedItemsService. Und der ist vom Typ "ISavedItemsService". Und diesen Service, den übergebe ich, da er über eine Methode verfügt, mit der ich alle bisher erfassten Einträge abrufen kann. Bedeutet, ich schreibe hier also: "this.savedItems" ist gleich "savedItemsService.getSavedItems". Damit ist mein Controller bereits fertig implementiert. Ich muss ihn jetzt nur noch zur Controller-Auflistung meines Angular-Moduls hinzufügen. Ich schreibe also "angular.module", und das war das Module "savedIt", das ich mich hier referenzieren muss. Und hier füge ich nun einen neuen Controller hinzu, nämlich den Controller "SavedItemsController". Und das ist die gerade geschriebene Klasse "SavedItemsController", die ich hier unter diesem Namen registriere. Im nächsten Schritt werde ich nun hingehen und den View für das Ganze bauen. Dieser View, das wird ein einfacher ListView sein. Bedeutet also: Ich sage hier "Hinzufügen" - "Neue HTML-Datei". Und die nenne ich "savedItems.html", lösche alles, was bereits vorhanden ist, da ich ja hier nur Teilbestandteile in einen Container hereinlade. Ich brauche hier einen ion-view. Und dieser View, der erhält den Titel "Bisher gespart". Der Content, der erhält die Klasse "padding", damit wir ein wenig Außenabstand haben. Und innerhalb des Inhaltsbereichs möchte ich nun eine Liste anzeigen. Dazu kann ich die Direktive "ion-list" benutzen. Und in "ion-list" kann ich jetzt für die Einträge ein Template erstellen. Und das mache ich über "ion-item". Und hier vergebe ich die Klasse "item-remove-animate". Heißt also: Wenn ich später Löschen implementiere, dann kann ich hier eine Animation haben. Außerdem sage ich, dass hier die Wiederholung stattfinden soll für alle savedItem-Einträge in meinem View-Model, und dort in der Auflistung "savedItems", also eben genau in diesem Feld hier. Außerdem gebe ich noch an, dass mein type des Ganzen gleich "item-text-wrap" ist. So, die Darstellung sieht jetzt wie folgt aus, dass ich für jeden Eintrag erstmal eine Überschrift vom Typ "h2" anzeige. Und diese wird die Beschreibung beinhalten, also das Feld "description". Anschließend kommt ein p-Tag, also ein Absatz. Und hier werde ich zunächst den Preis ausgeben, und anschließend in Klammern das Datum, wann das Ganze gespart wurde. So, nachdem ich nun das auch erledigt habe, besteht der nächste Schritt darin, dass ich das Routing entsprechend konfiguriere. Und das geschieht in der app.ts. Ich habe hier bisher bereits einen Zustand, nämlich den Zustand "home". Und ich brauche jetzt eben noch einen weiteren Zustand, nämlich den Zustand für den Detail-View. Und diesen Zustand, den füge ich einfach hier unten an. Ich muss dabei darauf achten, dass ich das Semikolon herunterschiebe. Und dann sagt die IntelliSense mir schon, dass ich hier einen weiteren State-Aufruf durchführen kann. Und unter diesem State-Aufruf übergebe ich zunächst den Namen meines Zustands. Den nenne ich einfach "details". Den Namen, den kann ich vollkommen wahlfrei vergeben, genauso wie die URL, die dieser Zustand jetzt erhalten wird. Und zwar sage ich, dass die URL, und das mache ich hier in diesem Objekt, das ich hier erzeugt habe, diese URL, die nenne ich also "/details". Und die Template-URL, das ist dieses Mal "views/savedItems/savedItems.html", also genau die Ansicht, die ich eben erzeugt habe. Und der Controller, das ist der Controller, den wir gerade geschrieben haben, nämlich der SavedItemsController. Und dieser erhält den Alias "vm" für "view model". Hier fehlt jetzt noch eine runde Klammer. Dann können wir das Ganze hier abschließen. Und damit wäre auch das Routing soweit definiert. Die Schritte, die ich also erledigt habe, um so eine neue Ansicht zu meiner Anwendung hinzuzufügen, bestanden daraus, dass ich zunächst einen Controller geschrieben habe. Dieser Controller war relativ einfach. Er konnte nämlich einen bestehenden Service nutzen und hat einfach nur einen Aufruf an diesen Service erledigt und anschließend das Ganze dann einem Feld zugewiesen. Zu dem Controller haben wir dann auch einen passenden View geschrieben. Und dieser View, der hat einen ListView im Inhaltsbereich. Wir haben ein Template definiert, haben gesagt, dass dieser Bereich hier, dieses "item" also, für jedes savedItem in meiner Auflistung "savedItems" wiederholt wird. Und anschließend mussten wir dann auch noch das Routing definieren. Das geschah in der app.ts, indem ich hier einfach einen neuen State definiert habe. Diesen State, den werde ich jetzt später benutzen müssen. Den muss ich also dann ansprechen, um entsprechend dorthin zu navigieren. Was ich jetzt nicht vergessen darf, ist, diese neue Datei "SavedItemsController" auch zu meinem Projekt hinzuzufügen, indem ich das in der index.html verlinke. Wir haben also hier bereits den Verweis auf den SavedItemsService. Und jetzt fehlt hier noch der SavedItemsController.

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!