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

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

Navigation einbauen

Testen Sie unsere 2017 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Die Anwendung des StateProviders ist das Thema in diesem Film.
04:44

Transkript

Nachdem ich in meiner Anwendung bereits eine Ansicht, einen Controller und einen Service zur Verwaltung der gespeicherten Einträge habe, wäre es jetzt noch sinnvoll, wenn ich von meinem Startbildschirm auch zu dieser neuen Ansicht navigieren könnte. Und dazu sind mehrere Schritte notwendig. Zum einen muss ich in meinem HomeController, und das war der Controller, der ja für meinen Startbildschirm zuständig ist, ein neues Argument an den Konstruktor übergeben, nämlich ein Argument vom Typ "StateService". Die entsprechende Variable, die heißt "$state", und die ist vom Typ "ng.ui.IStateService". Mit diesem Service hier kann ich jetzt in einen benamten Zustand wechseln. Heißt also: Ich kann in diesen Zustand "details" wechseln. Dazu lege ich mir hier eine neue Methode an. Die nenne ich "navigateToDetails". Und in dieser Methode kann ich jetzt relativ simpel navigieren. Alles, was ich dazu machen muss, ist, am StateService die Methode "go" aufzurufen und hier den Namen des neuen Zustands zu übergeben. Und das war "details". Jetzt brauchen wir natürlich noch einen Button in unserem UI, mit dem wir diese Methode auslösen können. Dazu wechsle ich in die home.html, und werde jetzt hier entsprechend mein Markup anpassen. Dazu gehe ich einfach hier unter das letzte Label und erzeuge hier einen Button. Und dieser Button, der bekommt genau wie oben die Klassen "button", "button- full" und "button-positive", damit ich so einen schönen, breiten Button habe. Und im ng-click rufen wir nicht "vm.addItem" auf, sondern "vm.navigateToDetails". Der Text, der lautet einfach "Details". So, das war es auch soweit schon. Ich habe alles andere bereits vorbereitet. Heißt: Wenn ich meine Anwendung jetzt starte, dann kann ich hin und her navigieren. Und das machen wir dann doch direkt einmal, indem ich hier erst einmal etwas erfasse, Burger, ein Schokoriegel, und jetzt klicke ich hier auf "Details". Und dann sehen wir hier, dass wir jetzt eine Auflistung meiner bisher gesparten Einträge haben, inklusive Datum und Betrag. Was wir noch ein wenig schöner machen könnten, wäre die Formatierung des Datums. Und das kann ich am einfachsten beheben, indem ich einmal hier herausgehe und jetzt in meinem View einen Filter benutze. Und dieser Filter, das ist der "date"-Filter. Und hier übergeben wir das Datum "medium". Und jetzt schalten wir das Ganze noch einmal. So, und ich erfasse einfach nur schon einen Eintrag "test" mit 99 Cent. Und jetzt sehen wir hier, dass auch Datum und Uhrzeit besser angezeigt werden. Um also zu navigieren, musste ich zwei Dinge erledigen. Nachdem das Routing vorher schon in der app.ts für mich erledigt war, nämlich genau an dieser Stelle hier, wo schon der State definiert war, habe ich in meinem Controller, von dem ich aus wegnavigieren wollte, einen Verweis auf den StateService von AngularUI hinzugefügt, und der wurde bereits mit der Ionic-Vorlage mitinstalliert. Dann habe ich eine Methode angelegt. Die habe ich "navigateToDetails" genannt. Sie können die natürlich in Ihrem Code so nennen, wie Sie das möchten. Und hier habe ich über diesen StateService die Methode "go" aufgerufen, und habe hier meinen Zustand, zu dem ich navigieren möchte, hinterlegt. Außerdem musste ich in meinem View natürlich noch einen Button anlegen, mit dem ich dann eben diese Methode aufgerufen habe, um dann schlussendlich navigieren zu können.

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!