Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

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

Routing definieren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Ionic nutzt die Angular-UI-Routing-Komponente. Wie Sie mit dieser "zustandsbasierten" Komponente Navigationsregeln definieren, erklärt dieses Video.
10:15

Transkript

Wenn ich meine App starte, dann erhalte ich nur einen weißen Bildschirm, und leider noch nicht diese Home-Ansicht, die ich hier definiert habe. Das liegt daran, dass ich meine App mit der Vorlage "Blank" gestartet habe und es hier halt eben keine Navigation oder Ähnliches gibt. Um dies nun zu ändern, sind mehrere Schritte erforderlich. Im Schritt Nummer 1 muss ich die Indexseite ändern, und ich muss hier einen Platzhalterbereich definieren, in den später der View geladen wird. Dazu scrolle ich in der Datei herunter. Und hier, wo aktuell "ion-content" steht, nehme ich folgende Änderungen vor. Ich lösche "ion-content", und habe jetzt hier also das "ion-pane". Und auch das lösche ich, sodass ich also nur noch den leeren Body habe. Innerhalb des Bodys werde ich jetzt ein nav-bar-Element anlegen. Also sage ich hier jetzt "ion-nav-bar". Und innerhalb dieser nav-bar vergebe ich erst einmal die Klasse "bar-stable". Dann lege ich einen Back-Button an, damit zurücknavigieren kann, insoweit das sinnvoll ist. Und damit ist die nav-bar geschlossen. Das ist also der obere Bereich. Und jetzt kommt mein eigentlicher Inhaltsbereich, nämlich der "ion-nav-view". Das ist also hier jetzt der Bereich, in den später die einzelnen Vorlagen, wie zum Beispiel diese home.html, hereingerendert werden. Damit die da hereingerendert werden, ist noch eine weitere Änderung notwendig. Und zwar öffne ich dazu einmal die Datei "app.ts". Und hier in der app.ts wird mein savedIt-Module definiert. Hier gibt es bereits eine Methode "run". Und ich werde jetzt eine weitere Methode hinzufügen. Bedeutet also: Ich gehe ganz hier unten hin, dort, wo "run" endet, und werde jetzt hier die Methode "config" aufrufen. Und an "config" übergebe ich den sogenannten StateProvider. Und der ist vom Typ "ng.ui.IStateProvider". Leider kennt Visual Studio dieses Interface im Moment nicht. Das liegt daran, dass mir noch ein paar Typings fehlen. Die werde ich jetzt gleich nachinstallieren. Und zwar gehen wir dazu wie folgt vor. Ich öffne eine neue Eingabeaufforderung. Und in dieser Eingabeaufforderung werden wir jetzt einige Dinge vornehmen. Zunächst einmal wechseln wir in der Eingabeaufforderung in unseren aktuellen Projektordner, und zwar tatsächlich in den Unterordner, in dem sich die ganzen weiteren Ordner befinden, also in dem ich dann hier meinen hooks-Ordner habe, in dem ich den scss-Ordner habe, oder halt eben auch den typings-Ordner. Als nächstes installiere ich über den Node-Packet-Manager das Node-Modul "typings". Das Modul "typings" wurde zwar schon als lokales Modul installiert, allerdings möchte ich es ganz gerne auch global nutzen können. Und deswegen installiere ich es mit dem g-Flag, und sage also: "npm install -g typings". Über Typings kann ich solche IntelliSense-Dateien für TypeScript herunterladen. Und ich hätte jetzt eben ganz gerne zwei Stück, einmal die typings-Datei für den UI-Router, und einmal für den UI-StateProvider. Und die erhalten wir, indem wir hier einmal mit Typings suchen nach dem Namen "angular-ui-router". Und jetzt sagt Typings uns: Das gibt es, und das gibt es in der Quelle "dt". Installieren kann ich das Ganze nun, indem ich eingebe "typings install angular-ui-router". So heißt das Paket. "--source" ist "dt", also dieses hier. Außerdem muss das Paket mit "--global" und "--save" installiert werden. Nachdem das erfolgt ist, sehen wir jetzt, dass hier in der Typings-Datei ein Eintrag hinzugekommen ist, nämlich ein Eintrag für den Angular-UI-Router. Mit dieser Typdefinition können wir nun unsere app.ts weiter bearbeiten. Dazu wechsle ich hier zurück und tippe meinen Befehl mal weiter. Ich brauche also auch noch den urlRouterProvider. Und der ist vom Typ "ng.ui" und dann vom Typ "IUrlRouterProvider". Außerdem muss ich an config natürlich eine Function übergeben. Also sage ich hier "function (", das ist eine anonyme Funktion, und jetzt klappt auch die IntelliSense entsprechend. So, diese config-Funktion, die dient nun dazu, um zu definieren, wie in meiner App navigiert werden kann. Dazu nutze ich den sogenannten StateProvider, den ich hier übergeben bekomme. Und ich sage jetzt, dass es an diesem StateProvider einen State gibt mit dem Namen "home". Und dieser State, der erhält Optionen. Und zwar erhält er als Option, dass er eintritt, wenn die URL gleich "/home" ist. In diesem Fall soll dann die Vorlage, also das Template, von der URL "views/home/home.html" geladen werden, also genau die Datei, die wir hier sehen. Und es soll der Controller mit dem Namen "HomeController" genutzt werden, und zwar unter dem Alias "vm", für "view model". Desweiteren definiere ich, dass dieser Home-Zustand auch mein Default-, also mein Standardzustand ist. Und das erledige ich, indem ich $urlProvider aufrufe, und jetzt "otherwise". Also immer dann, wenn es keine bekannte Route gibt, und im Moment gibt es eigentlich nur eine, zu der ich gehen kann, aber dann soll er immer zum Home-Zustand wechseln. Wenn ich meine Anwendung jetzt starte, dann werden wir sehen, dass wir eben auf dieser Home-Ansicht landen und nicht mehr, so wie zuvor, auf einer leeren Seite. So, und wie versprochen ist hier jetzt unsere Home-Ansicht. Und die sieht dem, was wir erreichen wollen, eigentlich schon relativ ähnlich. Die Schritte dazu waren wie folgt. Ich habe zum einen in der Datei "index.html" den Bereich innerhalb des Bodys ausgetauscht. Ich habe hier eine neue nav-bar angelegt. Und in dieser nav-bar sehen wir später den Titel des aktuellen Views, und wir sehen einen Zurück- Button, falls erforderlich. Außerdem habe ich einen Inhaltsbereich, einen nav-view, definiert. Anschließend musste ich noch definieren, dass meine Home-Ansicht meine Standardansicht ist. Dazu habe ich in der Datei "app.ts" die Konfiguration meines Moduls angelegt. Das Ganze funktionierte wie folgt. Es gab bereits einen Eintrag, was passieren soll, wenn das Modul läuft. Und ich habe das über Verkettung erweitert um einen Eintrag, wenn wir das Modul konfigurieren wollen. Ich habe hier angegeben, dass ich eine Abhängigkeit auf den StateProvider und auf den URL-Router-Provider habe. Um eine IntelliSense zu erhalten, habe ich außerdem über die Konsole zunächst das Typings- Node-Modul installiert. Und anschließend habe ich über "typings install angular-ui-router", "--source dt", "--global" und "--save" die IntelliSense für diesen Router und StateProvider heruntergeladen. Anschließend konnte ich dann innerhalb meiner Funktion definieren, dass es einen Zustand mit dem Namen "home" gibt, dass dieser Zustand immer dann wahr ist, wenn wir bei der URL "/home" sind, dass für diesen Zustand das Template unter der URL "views/home/home.html" geladen werden soll, dass wir außerdem den HomeController nutzen wollen, und dass wir diesen mit dem Alias "vm" ansprechen werden. Und genau diesen Alias "vm", den hatte ich auch schon zuvor in meinem View genutzt. Zu guter Letzt habe ich noch definiert, dass in dem Moment, wenn eine andere URL als eine der definierten hier oben angegeben wird, dass dann immer zur Home-URL gewechselt werden soll. Im Moment ist es so, dass es sowieso nur die Home-HTML gibt, aber wenn wir irgendwann einmal mehrere Views hätten, ist es schon wichtig, dass wir eine Startansicht definieren.

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!