Share
Was Sie erstellen werdenWir haben in dieser Serie bereits einiges behandelt, einschließlich der Navigation. Ionic bietet jedoch einige Komponenten, die zusätzliche Funktionen zum Erstellen einer funktionaleren Navigation bieten. In diesem Lernprogramm fügen wir der App das Seitenmenü und die Registerkarten hinzu. Außerdem betrachten wir einige zusätzliche Dienste, um die Navigation durch unsere App intelligenter zu gestalten.
Die Tutorial-Projektdateien sind auf GitHub verfügbar. Die allgemeine Voraussetzung der App ist, dass sie einige Informationen über lokale Einrichtungen anzeigt. In diesem Lernprogramm können Sie Bibliotheken, Museen, Parks und Krankenhäuser anzeigen. Derzeit werden nur Standorte in Chicago angezeigt, was wir im nächsten Tutorial korrigieren.
Sie können das abgeschlossene Projekt für dieses Tutorial von GitHub unter herunterladen. Wenn Sie das Projekt klonen, können Sie auch mithilfe von Git codieren und ausführen git checkout -b start. Das letzte Beispiel ist auch als Vorschau verfügbar.
Beachten Sie, dass ich die Auflösung aus der Ortsansicht entfernt habe, die wir im dritten Teil dieser Serie hatten. Ich möchte nicht näher darauf eingehen, aber der Controller lädt die Daten jetzt und vereinfacht die Navigation.
Eines der häufigsten Navigationsmuster in mobilen Apps ist ein Seitenmenü. Hierbei handelt es sich um eine Schublade, die von der Seite ausgefahren wird und Navigationslinks und möglicherweise andere Inhalte wie den aktuellen Anmeldestatus anzeigt. Sie befinden sich außerhalb des Bildschirms und werden durch eine Art Schaltfläche geöffnet, oft das Hamburger-Symbol, auch wenn die Verwendung dieses Symbols nicht einverstanden ist.
Die Seitenmenüs können häufig durch Wischen von der Seite geöffnet werden, um sie zu öffnen, oder zurück zu wischen, um sie zu drücken. Dies kann praktisch sein, kann jedoch manchmal anderen Gesten im Weg stehen und Sie sollten auf widersprüchliche Verhaltensweisen achten. Sie sollten die beste Verwendung des Wischens im Hinblick auf die gesamte Vision und Erfahrung Ihrer App im Auge behalten, und wenn ein Problem besteht, können Sie es deaktivieren.
Ionic bietet eine Reihe von Komponenten, die das Einrichten eines Nebenmenüs vereinfachen. Sie können bis zu zwei Seitenmenüs erstellen, eines rechts und eines links. Ein Seitenmenü besteht aus mehreren Komponenten, ionSideMenus, ionSideMenu, und ionSideMenuContent.
Um dies in Aktion zu sehen, lassen Sie uns aktualisieren www / index.html und ein Nebenmenü einrichten. Sie ersetzen den vorhandenen Inhalt durch den folgenden Code, der die Seitenmenükomponenten um unseren vorhandenen Code herum hinzufügt.
Civinfo
Setzt die Einstellungen Zurück
Um ein Nebenmenü zu aktivieren, packen wir zunächst unseren App-Inhalt ein ionSideMenus. Damit kann Ionic das Seitenmenü und die Inhaltsbereiche koordinieren. Wir haben dann eine ionSideMenu mit einer side = "left" Attribut, um anzugeben, welche Seite es besetzt.
Im Seitenmenü können wir jeden gewünschten Inhalt einfügen. In diesem Fall und wahrscheinlich das häufigste Szenario ist der Inhalt ein ionHeaderBar Komponente und ein ionList Komponente, um den App-Titel bzw. eine Liste von Links anzuzeigen. Wir haben die Einstellungsansicht noch nicht definiert, so dass der Link für den Moment fehlschlägt. Beachten Sie auch, dass die ionItem Komponenten haben eine Menü schließen Attribut. Das Seitenmenü wird automatisch geschlossen, wenn ein Benutzer auf den Link klickt. Andernfalls bleibt er geöffnet.
Das ionSideMenuContent Komponente enthält den primären Inhaltsbereich. Dieser Inhaltsbereich nimmt den gesamten Bildschirm ein, aber diese Komponente hilft nur, die Seitenmenükomponente richtig zu rendern. Wir haben auch die verwendet drag-content = "false" Attribut zum Deaktivieren von Ziehbewegungen, da diese die Bildlaufliste und Registerkarten beeinträchtigen.
Wir haben der Navigationsleiste auch eine neue Schaltfläche hinzugefügt ionNavButtons. Dies ist das Seitenmenüsymbol, das oben rechts als drei gestapelte Linien angezeigt wird. Diese Schaltfläche hat die menu-toggle = "left" Attribut, wodurch das Menü auf der linken Seite aktiviert wird, wenn es ausgewählt wird.
Nun, da unser Seitenmenü vorhanden ist, können Sie nun die nächste wichtige Navigationskomponente einrichten, indem Sie Registerkarten für die Einstellungsansicht hinzufügen.
Registerkarten sind ein weiteres gängiges Navigationsmuster zum Navigieren in einer App. Tabs sind einfach zu verstehen, da wir sie in so vielen Arten von Benutzeroberflächen sehen, nicht nur in mobilen Apps.
Registerkarten können zustandsbehaftet oder zustandslos sein. Eine Registerkarte, auf der Inhalte angezeigt werden, die keine Änderungen enthalten, ist zustandslos, während eine Registerkarte, die einen auf Benutzerinteraktion basierenden Zustand aufrechterhält, zustandsbehaftet ist (z. B. das Aufrechterhalten eines Suchergebnisses). Wir untersuchen, wie Sie mit Ionic Stateful-Tabs erstellen können, da diese komplexer und leistungsfähiger sind.
Das Einrichten von Registerkarten ist mit der ionTabs und ionTab Komponenten. Ähnlich wie bei den Seitenmenüs fügen Sie beliebig viele Tabulatorkomponenten ein. Es gibt kein hartes Limit, aber fünf sind ein gesundes Maximum. Bei kleineren Geräten ist es aufgrund zu vieler Symbole schwierig, eine Registerkarte auszuwählen.
Wir werden die Registerkarten einrichten, indem wir ein paar neue Dateien erstellen. Lassen Sie uns zunächst die Vorlage einrichten, indem Sie eine neue Datei unter erstellen www / views / settings / settings.html. Fügen Sie der neuen Datei den folgenden Code hinzu.
Das ionTabs Komponente wird verwendet, um das Innere einzuwickeln ionTab Komponenten. Es gibt verschiedene Klassen, die definieren können, wie die Registerkarten angezeigt werden, z. B. das Platzieren von Registerkarten oben oder unten, das Verwenden von Symbolen mit oder ohne Titel und mehr. Hier haben wir uns entschieden, Registerkarten zu verwenden, die einen Titel mit dem Symbol oben mit der stabilen Farbvoreinstellung haben.
Das ionTab Die Komponente verfügt über eine Reihe von Attributen, mit denen das Verhalten definiert werden kann. Es unterstützt viele Funktionen, z. B. das Anzeigen einer kleinen Benachrichtigung, das Verknüpfen von Registerkarten mit Status, das Verhalten von Symbolen und vieles mehr. Für unsere Registerkarten hat jede eine Titel, eine Symbolklasse für die aktive Registerkarte (icon-on) oder inaktiv (Symbol aus) und verlinkt zu einem Staat mit ui-sref.
Innerhalb jeder Registerkarte befindet sich eine andere ionNavView. Dies mag fehl am Platz erscheinen, da wir bereits eine haben ionNavView eingerichtet in index.html. Was wir tun, ist das Deklarieren zusätzlicher Standorte, an denen ein Zustand dargestellt werden kann, die als untergeordnete Ansichten betrachtet werden können.
Jede Registerkarte kann eine eigene Navigationshistorie haben, da jede ionNavView ist unabhängig von den anderen. Jede Registerkarte hat auch einen eindeutigen Namen, der sich als nützlich erweisen kann, so dass wir bestimmte Zustände definieren können, die im benannten angezeigt werden ionNavView.
Sie haben vielleicht bemerkt, dass es keine gibt ionView Element auf dieser Seite und das ist wichtig zu beachten, wenn Stateful Tabs verwendet werden. Es ist nicht erforderlich, wenn Sie es verwenden ionTabs Nur wenn Sie die statuslosen Registerkarten verwenden, benötigen Sie die CSS-Komponentenversion.
Wir müssen jetzt einige zusätzliche Zustände einrichten, um das Beispiel funktionsfähig zu machen. Erstellen Sie eine weitere Datei unter www / views / settings / settings.js und fügen Sie den folgenden Code hinzu.
Accentsconagua
angle.module ('App') .config (Funktion ($ stateProvider, $ urlRouterProvider) $ stateProvider.state ('settings', url: '/ settings', Zusammenfassung: true, templateUrl: 'Ansichten / Einstellungen / Einstellungen. html ') .state (' settings.about ', url:' / about '), Ansichten: about: templateUrl:' views / settings / tab.about.html ') .state (' settings. Lizenz ', url:' / license ', Ansichten: about: templateUrl:' views / settings / tab.license.html ') .state (' settings.preferences ', url:' / preferences ') , views: preferences: controller: 'PreferencesController', controllerAs: 'vm', templateUrl: 'views / settings / tab.preferences.html'); $ urlRouterProvider.when ('/ settings', '/ settings.) / preferences ');) .controller (' PreferencesController ', Funktion (Typen) var vm = this; vm.types = Types;);Sie sehen, dass wir mehrere neue Zustände einrichten, die sich jedoch von den anderen Zuständen unterscheiden, die wir bisher definiert haben. Der erste Zustand ist ein abstrakter Zustand, der im Wesentlichen ein Zustand ist, der nicht direkt geladen werden kann und Kinder hat. Das macht für uns mit der Tabs-Schnittstelle Sinn, weil die die Einstellungen state lädt die Tabulatorkomponentenvorlage, aber Benutzer befinden sich niemals nur in der Tabulatorkomponente. Sie sehen immer die aktive Registerkarte, die einen anderen Status enthält. Wenn Sie also abstrakt verwenden, können Sie diese richtig verdrahten.
Die anderen drei Zustände sind definiert als Einstellungen. [Name]. Dies erlaubt uns, eine Eltern-Kind-Beziehung zwischen diesen Zuständen zu definieren, die im Wesentlichen die Eltern-Kind-Beziehung der widerspiegelt ionTabs und ionTab Komponenten. In diesen Zuständen wird die view -Eigenschaft verwendet, bei der es sich um ein Objekt handelt, dessen Eigenschaft für die zu verwendende Ansicht benannt ist.
Der Name, den Sie in Ihrer Vorlage angeben ionNavView sollte mit dem Eigenschaftsnamen übereinstimmen. Der Wert dieser Eigenschaft ist dann dieselbe Zustandsdefinition ohne die url das wurde wie üblich erklärt. Das url folgt auch der Eltern-Kind-Beziehung durch die Kombination der beiden. Also alle diese Kindzustände rendern gerne / Einstellungen / Einstellungen.
Sie müssen hinzufügen einstellungen.js zu index.html mit einem anderen Skript-Tag. Sobald Sie dies getan haben, werden einige Fehler angezeigt, da wir auf einige Dateien verweisen, die wir noch nicht erstellt haben. Zum Schluss noch unsere Tabs-Vorlagen.
Wir müssen drei schaffen. Die ersten beiden sind statischer Inhalt, daher werde ich sie nicht im Detail besprechen. Erstellen Sie eine Datei unter www / views / settings / tab.about.html und fügen Sie den folgenden Inhalt hinzu.
Projekt auf GitHub
Klicken Sie hier, um das Projekt anzuzeigen
Lizenz
Vollständige Lizenz anzeigen
Diese enthält eine Vorlage, die einige Informationen anzeigt. Es ist mit dem GitHub-Projekt und der Lizenz verknüpft. So sieht es aus.
Erstellen Sie eine weitere Datei unter www / views / settings / tab.license.html und fügen Sie den folgenden Inhalt hinzu.
Copyright (c) 2016 Jeremy Wilken
Jede Person, die eine Kopie dieser Software und der zugehörigen Dokumentationsdateien (die "Software") erhält, kann hiermit kostenlos die uneingeschränkte Behandlung der Software, einschließlich der Rechte zur Verwendung, zum Kopieren, Modifizieren und Zusammenführen, vornehmen Kopien der Software veröffentlichen, verteilen, unterlizenzieren und / oder verkaufen und Personen, denen die Software zur Verfügung gestellt wird, dies zulassen, unter den folgenden Bedingungen:
Der obige Copyright-Hinweis und dieser Erlaubnisschein sind in allen Kopien oder wesentlichen Teilen der Software enthalten.
DIE SOFTWARE WIRD "WIE BESEHEN" OHNE JEGLICHE AUSDRÜCKLICHE ODER STILLSCHWEIGENDE GEWÄHRLEISTUNG ZUR VERFÜGUNG GESTELLT, EINSCHLIESSLICH DER GEWÄHRLEISTUNGEN DER MARKTGÄNGIGKEIT, DER EIGNUNG FÜR EINEN BESTIMMTEN ZWECK UND DER NICHT VERLETZUNG. DIE AUTOREN ODER COPYRIGHT-INHABER HAFTEN KEINERLEI HAFTUNG FÜR ALLE ANSPRÜCHE, SCHÄDEN ODER ANDEREN HAFTUNGEN, WENN SIE IN EINEM VERTRAGSVERFAHREN, DORT ODER ANDERWEIT WÄHREND DER SOFTWARE ODER IN VERBINDUNG MIT DER SOFTWARE ODER IN VERBINDUNG MIT DER SOFTWARE ODER DER VERWENDUNG ODER ANDERER VEREINBARUNG ODER SONSTIGER HAFTUNG HAFTEN SOFTWARE.
Dieser enthält den Lizenzinhalt (MIT) für diesen Code. Es gibt eine einfache Karte, die den Inhalt enthält. So sieht es aus.
Die endgültige Vorlage enthält einige Formularelemente. Ich werde es etwas ausführlicher besprechen. Erstellen Sie eine neue Datei unter www / views / settings / tab.preferences.html und fügen Sie den folgenden Inhalt hinzu.
- Arten von Standorten
- typ.type
Diese Ansicht enthält eine Liste von Schaltern, die die vier Arten von Orten anzeigt, die die App anzeigen kann, Museum, Park, Bibliothek und Krankenhaus. Mit jedem dieser Listenelemente können Sie einen Ortstyp aus der Liste aktivieren oder deaktivieren. Die Umschaltfläche ist eine CSS-Komponente. Wir brauchen nur eine Checkbox-Eingabe mit dieser spezifischen Markup- und CSS-Klassenstruktur, um sie als mobile Umschaltflächen erscheinen zu lassen.
In dieser Ansicht ist ein Controller deklariert einstellungen.js, aber es spritzt ein Typen Service, den wir noch nicht erstellt haben. Wir werden das beheben, indem wir einen neuen Dienst hinzufügen www / js / app.js.
.factory ('Types', function () return [type: 'Park', aktiviert: wahr, type: 'Krankenhaus', aktiviert: true, type: 'Bibliothek', aktiviert: true, type : 'Museum', aktiviert: true];)Dieser Dienst enthält eine Reihe von Ortstypen. Es hat eine Eigenschaft für den Namen jedes Platztyps und ob er aktiviert oder deaktiviert ist. Wir verwenden die aktivierte Eigenschaft in der Umschaltfläche ngModel um den Status zu verfolgen, wenn dieser Typ angezeigt werden soll.
An dieser Stelle können Sie das Seitenmenü öffnen und zum Einstellungslink navigieren. Sie können die beiden Registerkarten, Voreinstellungen und ungefähr sehen. Auf der Registerkarte "Einstellungen" können Sie die Ortstypen aktivieren oder deaktivieren.
Wenn Sie zur Registerkarte "Info" wechseln, können Sie die Lizenz auswählen, um zu sehen, wie sie zu einer anderen Route innerhalb der Registerkarte navigiert. Wenn Sie nach dem Anzeigen der Lizenz zwischen den Einstellungen und der Registerkarte "Info" wechseln, können Sie feststellen, dass die Registerkarte sich auch nach dem Verlassen des Lizenzstatus daran erinnert, was den Status dieser Registerkarten demonstriert.
Der letzte Schritt dieses Lernprogramms besteht darin, die Ortsansicht zu aktualisieren, um die Typen Dienst, um nur die gewünschten Arten von Bereichen zu laden, und den Verlaufsdienst verwenden, um zu behandeln, wann der Cache neu geladen oder verwendet werden soll.
Standardmäßig speichert Ionic die letzten 10 Ansichten und speichert sie im Speicher. Viele Apps verfügen möglicherweise nicht über so viele Zustände, dass Ihre gesamte App möglicherweise im Speicher verbleibt. Dies ist nützlich, da Ionic die Ansicht vor dem Navigieren nicht erneut rendern muss, was die App beschleunigt.
Dies kann zu Verhaltensproblemen führen, da Sie denken, dass Ihre Zustände den Controller immer neu laden und neu initialisieren, wenn auf den Status zugegriffen wird. Da nur 10 Ansichten zwischengespeichert werden, befinden sich bei 20 Ansichten nur die letzten 10 im Cache. Das heißt, Sie können nicht garantieren, dass sich eine Ansicht im Cache befindet oder nicht. Sie sollten es daher vermeiden, die Setup-Logik in Ihren Steuerungen außerhalb der Lebenszyklushaken auszuführen. Sie können Caching-Strategien auch mithilfe von konfigurieren $ ionicConfigProvider.
Manchmal müssen Sie sich den Navigationsverlauf des Benutzers ansehen, um zu bestimmen, was zu tun ist. In dieser App möchten wir beispielsweise die Liste der Orte im Cache speichern, wenn der Benutzer auf einen Ort tippt und dann zur Liste zurückkehrt. Wenn wir die Liste bei jedem Besuch automatisch aktualisieren, könnten Benutzer ihren Platz in der Liste verlieren, nachdem sie einen Bildlauf durchgeführt und einen Ort angesehen haben.
Wenn ein Benutzer auf der Einstellungsseite navigiert und dann zur Bereichsliste zurückkehrt, möchten wir die Liste aktualisieren, da sie möglicherweise die Arten von Orten geändert haben, die sie anzeigen möchten.
Wir werden eine Kombination der Lebenszyklusereignisse verwenden, die wir zuvor mit der $ ionicHistory Dienst, um eine Logik hinzuzufügen, mit der festgestellt werden kann, wann der Ortsstatus die Liste neu laden soll. Wir möchten auch die verwenden Typen Service, der uns dabei hilft, nur die Arten von Orten zu laden, die der Benutzer sehen möchte.
Öffnen www / views / places / places.js und aktualisieren Sie es mit dem folgenden Code. Wir müssen die Art, wie Daten geladen werden, ändern und die $ ionicHistory Dienst, um den Verlauf zu überprüfen, um festzustellen, wann er neu geladen werden soll.
angle.module ('App') .config (Funktion ($ stateProvider) $ stateProvider.state ('places', url: '/ places', Controller: 'PlacesController als vm', templateUrl: 'Ansichten / Orte / Orte .html ');) .controller (' PlacesController ', Funktion ($ http, $ scope, $ ionicLoading, $ ionicHistory, Geolocation, Typen) var vm = this; var base =' https: // civinfo-apis .herokuapp.com / civic / places? location = '+ Geolocation.geometry.location.lat +', '+ Geolocation.geometry.location.lng; var token = "; vm.canLoad = true; vm.places = [] vm.load = Funktion load () $ ionicLoading.show (); var url = base; var query = []; angle.forEach (Typen, Funktion (type) if (type.enabled === true) query.push (type.type.toLowerCase ());;) url + = '& query =' + query.join ('|'); if (token) url + = '& token =' + token; $ http.get (url) .then (Funktion handleResponse (Antwort) vm.places = vm.places.concat (response.data.results)); token = response.data.next_page_token; if (! response.data.next_page_token) vm.canLoad = false; $ scope. $ broadcast ('scroll.infiniteScrollComplete'); $ ionicLoading.hide (); ); ; $ scope. $ on ('$ ionicView.beforeEnter', function () var previous = $ ionicHistory.forwardView (); if (! previous || previous.stateName! = 'place') token = "; vm.canLoad = false; vm.places = []; vm.load ();;;Erstens haben wir die Art und Weise geändert, in der die URL für unsere API erstellt wurde, um vom Laden nur Parks zum Laden der angeforderten Typen zu wechseln. Wenn Sie dies mit der Vorgängerversion vergleichen, wird diese hauptsächlich verwendet eckig um jeden Typ zu durchlaufen und der URL hinzuzufügen.
Wir haben auch die Art und Weise geändert $ ionicLoading Service verhält sich. Anstatt sofort zu laufen, wenn der Controller anläuft, lösen wir ihn jederzeit aus vm.load () Methode wird aufgerufen. Dies ist wichtig, da der Controller zwischengespeichert wird und standardmäßig keine Daten neu lädt.
Die größte Änderung ist die $ ionicView.beforeEnter Lebenszyklus-Ereignishandler. Dieses Ereignis wird ausgelöst, bevor die Ansicht zur nächsten aktiven Ansicht wird. Hier können Sie einige Einstellungen vornehmen. Wir nehmen das $ ionicHistory.forwardView () Methode, um Informationen über die letzte Ansicht des Benutzers zu erhalten.
Wenn es sich um den ersten Ladevorgang handelt, ist dieser leer. Andernfalls werden einige Daten zum letzten Status zurückgegeben. Wir prüfen dann, ob der vorherige Status der Ortsstatus war, und wenn ja, verwenden wir die zwischengespeicherte Ergebnisliste. Da wir weniger als 10 Zustände haben, wissen wir, dass der Zustand immer im Gedächtnis bleibt.
Andernfalls werden die zwischengespeicherten Werte zurückgesetzt und eine neue Datenladung ausgelöst. Das heißt, jedes Mal, wenn ich nach dem Aufrufen der Einstellungen zur Ortsansicht zurückkehre, werden die Daten neu geladen. Abhängig von Ihrem App-Design möchten Sie wahrscheinlich verschiedene bedingte Regeln für die Handhabung von Zwischenspeichern und erneutem Laden entwerfen.
Der Protokolldienst bietet weitere Informationen, z. B. den gesamten Protokollstack, die Möglichkeit, den Verlauf zu ändern, Details zum aktuellen Status und vieles mehr. Sie können diesen Dienst verwenden, um die Navigation zu optimieren, während Sie in der App navigieren.
Wir werden zwei weitere kleine Änderungen an unserer Platzvorlage vornehmen. Öffnen www / views / places / places.html und ändern Sie den Titel in Lokale Orte.
Aktualisieren Sie als Nächstes die unendliche Bildlaufkomponente mit einem weiteren Attribut, sofortige Prüfung, um zu verhindern, dass die unendliche Bildlaufkomponente Daten gleichzeitig mit dem ersten Laden lädt. Dies hilft im Wesentlichen, doppelte Anforderungen für mehr Daten zu vermeiden.
Zu diesem Zeitpunkt haben wir eine ziemlich solide App entwickelt, die eine Reihe hübscher Funktionen bietet. Wir werden diese Serie mit einem letzten Tutorial abschließen, das sich mit Cordova befasst und einige der Gerätefunktionen integriert, beispielsweise den Zugriff auf GPS-Daten.
Die Navigation mit Ionic beginnt immer mit der Angabe einiger Zustände. Das Anzeigen dieser Navigation kann auf verschiedene Arten erfolgen, wie wir in diesem Tutorial gesehen haben. Dies haben wir in diesem Tutorial behandelt:
$ ionicHistory Dienst, um mehr über die Navigationshistorie der App zu erfahren, um das Erlebnis anzupassen.