Erste Schritte mit Ionic: Navigation

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Final product image — What You'll Be Creating

Wir haben in dieser Reihe bereits einiges behandelt, einschließlich der Navigation. Ionic bietet jedoch einige Komponenten, die zusätzliche Funktionen zum Erstellen einer funktionaleren Navigation bieten. In diesem Tutorial fügen wir der App die Seitenmenü- und Registerkartenkomponenten hinzu und sehen uns einige zusätzliche Dienste an, um die Navigation unserer App intelligenter zu gestalten.

Tutorial-Projektdateien

Die Tutorial-Projektdateien sind auf GitHub verfügbar. Die allgemeine Prämisse der App ist, dass sie einige Informationen über lokale Einrichtungen anzeigt. In diesem Tutorial fügen wir die Möglichkeit hinzu, Bibliotheken, Museen, Parks und Krankenhäuser anzuzeigen. Derzeit werden nur Standorte in Chicago angezeigt. Dies wird im nächsten Lernprogramm behoben.

Sie können das abgeschlossene Projekt für dieses Tutorial von GitHub unter herunterladen. Wenn Sie das Projekt klonen, können Sie auch mit Git codieren und git checkout –b start ausführen. Das letzte Beispiel kann auch in der Vorschau angezeigt werden.

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 unsere Navigation.

1. Hinzufügen eines Seitenmenüs

Eines der häufigsten Navigationsmuster in mobilen Apps ist ein Seitenmenü. Dies ist eine Schublade, die von der Seite herausgeschoben wird und Navigationslinks und möglicherweise andere Inhalte wie den aktuellen Anmeldestatus anzeigt. Von Natur aus sind sie außerhalb des Bildschirms und werden durch eine Art Knopf geöffnet, häufig das Hamburger-Symbol, obwohl die Leute sich über die Verwendung dieses Symbols nicht einig sind.

Seitenmenüs können oft geöffnet werden, indem Sie von der Seite wischen, um sie zu öffnen, oder zurückwischen, um sie zu schließen. Dies kann praktisch sein, kann aber manchmal anderen Gesten im Wege stehen, und Sie sollten nach widersprüchlichen Verhaltensweisen Ausschau halten. Sie sollten die beste Verwendung des Wischens unter Berücksichtigung der gesamten Vision und Erfahrung Ihrer App in Betracht ziehen. Wenn Sie Bedenken haben, können Sie diese deaktivieren.

Ionic bietet einige Komponenten, die das Einrichten eines Seitenmenüs trivial machen. Sie können bis zu zwei Seitenmenüs erstellen, eines rechts und eines links. Ein Seitenmenü umfasst mehrere Komponenten, ionSideMenus, ionSideMenu und ionSideMenuContent.

Um dies in Aktion zu sehen, aktualisieren wir www/index.html und richten ein Seitenmenü ein. Sie ersetzen den vorhandenen Inhalt durch den folgenden Code, der die Seitenmenükomponenten um unseren vorhandenen Code hinzufügt.

<body ng-app="App">
  <ion-side-menus>
    <ion-side-menu side="left">
      <ion-header-bar>
        <h1 class="title">Civinfo</h1>
      </ion-header-bar>
      <ion-content>
        <ion-list>
          <ion-item ui-sref="places" menu-close>Places</ion-item>
          <ion-item ui-sref="settings.preferences" menu-close>Settings</ion-item>
        </ion-list>
      </ion-content>
    </ion-side-menu>
    <ion-side-menu-content drag-content="false">
      <ion-nav-bar class="bar-balanced">
        <ion-nav-buttons side="left">
          <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
        </ion-nav-buttons>
        <ion-nav-back-button class="button-clear">
          <i class="ion-arrow-left-c"></i> Back
        </ion-nav-back-button>
      </ion-nav-bar>
      <ion-nav-view></ion-nav-view>
    </ion-side-menu-content>
  </ion-side-menus>
</body>

Um ein Seitenmenü zu aktivieren, verpacken wir zunächst unseren App-Inhalt in ionSideMenus. Es ermöglicht Ionic, das Seitenmenü und die Inhaltsbereiche zu koordinieren. Wir haben dann ein ionSideMenu mit einem side="left" -Attribut, um anzugeben, welche Seite es einnimmt.

Im Seitenmenü können wir jeden gewünschten Inhalt einfügen. In diesem Fall und wahrscheinlich dem häufigsten Szenario ist der Inhalt eine ionHeaderBar-Komponente und eine ionList-Komponente, um den App-Titel bzw. eine Liste von Links zu rendern. Wir haben die Einstellungsansicht noch nicht definiert, sodass dieser Link momentan fehlschlägt. Beachten Sie außerdem, dass die ionItem-Komponenten über ein Attribut zum menu-close verfügen. Dadurch wird das Seitenmenü automatisch geschlossen, wenn ein Benutzer auf den Link klickt, andernfalls bleibt er geöffnet.

Die ionSideMenuContent-Komponente wird verwendet, um den primären Inhaltsbereich zu enthalten. Dieser Inhaltsbereich nimmt den gesamten Bildschirm ein, aber diese Komponente hilft nur der Seitenmenükomponente, richtig zu rendern. Wir haben auch das Attribut drag-content="false" verwendet, um Drag-Gesten zu deaktivieren, da sie die Bildlaufliste und Registerkarten beeinträchtigen.

Wir haben der Navigationsleiste auch eine neue Schaltfläche mit ionNavButtons hinzugefügt. Dies ist das Seitenmenüsymbol, das oben rechts als drei gestapelte Linien angezeigt wird. Diese Schaltfläche hat das Attribut menu-toggle="left", wodurch das Menü auf der linken Seite bei Auswahl umgeschaltet wird.

Nachdem unser Seitenmenü eingerichtet ist, können Sie die nächste wichtige Navigationskomponente einrichten, indem Sie Registerkarten für die Einstellungsansicht hinzufügen.

2. Registerkarten mit individuellem Navigationsverlauf

Registerkarten sind ein weiteres gängiges Navigationsmuster für die Navigation in einer App. Registerkarten sind leicht zu verstehen, da wir sie in so vielen Arten von Benutzeroberflächen sehen, nicht nur in mobilen Apps.

Tabs können zustandsbehaftet oder zustandslos sein. Eine Registerkarte, auf der Inhalte angezeigt werden, in denen keine Änderungen gespeichert sind, ist zustandslos, während eine Registerkarte, die einen Status basierend auf der Benutzerinteraktion beibehält, statusbehaftet ist (z. B. ein Suchergebnis beibehalten). Wir sehen uns an, wie Sie mit Ionic Stateful Tabs erstellen, da diese komplexer und leistungsfähiger sind.

Das Einrichten von Registerkarten ist mit den Komponenten ionTabs und ionTab recht einfach. Ähnlich wie in den Seitenmenüs fügen Sie so viele Registerkartenkomponenten ein, wie Sie möchten. Es gibt keine feste Grenze, aber ich finde, fünf ist ein gesundes Maximum. Bei kleineren Geräten erschweren zu viele Symbole die Auswahl einer Registerkarte.

Wir werden die Registerkarten einrichten, indem wir einige neue Dateien erstellen. Lassen Sie uns zunächst die Vorlage einrichten, indem Sie eine neue Datei unter www/views/settings/settings.html erstellen. Fügen Sie der neuen Datei den folgenden Code hinzu.

<ion-tabs class="tabs-icon-top tabs-stable">

  <ion-tab title="Preferences" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline" ui-sref="settings.preferences">
    <ion-nav-view name="preferences"></ion-nav-view>
  </ion-tab>

  <ion-tab title="About" icon-on="ion-ios-information" icon-off="ion-ios-information-outline" ui-sref="settings.about">
    <ion-nav-view name="about"></ion-nav-view>
  </ion-tab>

</ion-tabs>

Die ionTabs-Komponente wird verwendet, um die inneren ionTab-Komponenten zu verpacken. Es gibt verschiedene Klassen, die definieren können, wie die Registerkarten angezeigt werden, z. B. das Platzieren von Registerkarten oben oder unten, die Verwendung von Symbolen mit oder ohne Titel und vieles mehr. Hier haben wir uns entschieden, Registerkarten zu verwenden, die einen Titel mit dem Symbol oben mit der stabilen Farbvoreinstellung haben.

Die ionTab-Komponente verfügt über eine Reihe von Attributen, mit denen ihr Verhalten definiert werden kann. Es unterstützt viele Funktionen, z. B. das Anzeigen eines kleinen Benachrichtigungsausweises, das Verknüpfen von Registerkarten mit Status, das Verhalten von Symbolen und vieles mehr. Für unsere Registerkarten hat jede einen title, eine Symbolklasse, wenn die Registerkarte aktiv (icon-on) oder inaktiv (icon-off) ist, und verknüpft mit ui-sref mit einem Status.

Innerhalb jeder Registerkarte befindet sich eine andere ionNavView. Dies scheint fehl am Platz zu sein, da in index.html bereits ein ionNavView eingerichtet ist. Wir deklarieren zusätzliche Speicherorte, an denen ein Status gerendert werden kann, der als untergeordnete Ansichten betrachtet werden kann.

Jede Registerkarte kann einen eigenen Navigationsverlauf haben, da jede ionNavView unabhängig von den anderen ist. Jede Registerkarte hat auch einen eindeutigen Namen, der nützlich sein wird, damit wir bestimmte Zustände definieren können, die im benannten ionNavView angezeigt werden sollen.

Möglicherweise haben Sie bemerkt, dass auf dieser Seite kein ionView-Element vorhanden ist. Dies ist wichtig, wenn Sie statusbehaftete Registerkarten verwenden. Es wird nicht benötigt, wenn Sie ionTabs auf diese Weise verwenden. Nur wenn Sie die zustandslosen Registerkarten, die CSS-Komponentenversion, verwenden, benötigen Sie es.

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.

angular.module('App')
.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider.state('settings', {
    url: '/settings',
    abstract: true,
    templateUrl: 'views/settings/settings.html'
  })
  .state('settings.about', {
    url: '/about',
    views: {
      about: {
        templateUrl: 'views/settings/tab.about.html'
      }
    }
  })
  .state('settings.license', {
    url: '/license',
    views: {
      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', function(Types) {
  var vm = this;

  vm.types = Types;
});

Sie können sehen, dass wir mehrere neue Zustände einrichten, aber diese unterscheiden sich von anderen Zuständen, die wir bisher definiert haben. Der erste Zustand ist ein abstrakter Zustand, der im Wesentlichen ein Zustand ist, der nicht direkt allein geladen werden kann und Kinder hat. Dies ist für uns mit der Tabs-Oberfläche sinnvoll, da der settings-Status die Tabs-Komponentenvorlage lädt, Benutzer sich jedoch nie nur auf der Tabs-Komponente befinden. Sie sehen immer die aktive Registerkarte, die einen anderen Status enthält. Wenn wir also abstrakt verwenden, haben wir die Möglichkeit, diese richtig zu verkabeln.

Die anderen drei Zustände sind als definiert settings.[name]. Auf diese Weise können wir eine Eltern-Kind-Beziehung zwischen diesen Zuständen definieren, die im Wesentlichen die Eltern-Kind-Beziehung der Komponenten ionTabs und ionTab widerspiegelt. Diese Zustände verwenden die view-Eigenschaft, bei der es sich um ein Objekt mit einer Eigenschaft handelt, die für die zu verwendende Ansicht benannt ist.

Der Name, den Sie in Ihrer Vorlage mit ionNavView angeben, sollte mit dem Eigenschaftsnamen übereinstimmen. Der Wert dieser Eigenschaft ist dann dieselbe Statusdefinition ohne die url, die auf die übliche Weise deklariert wurde. Die url folgt auch der Eltern-Kind-Beziehung, indem sie beide kombiniert. Alle diese untergeordneten Zustände werden also wie /settings/preferences wiedergegeben.

Sie müssen settings.js mit einem anderen Skript-Tag zu index.html hinzufügen. Sobald Sie dies getan haben, werden einige Fehler angezeigt, da wir auf eine Reihe von Dateien verweisen, die wir noch nicht erstellt haben. Lassen Sie uns mit unseren Registerkartenvorlagen fertig werden.

1	<script src="views/settings/settings.js"></script>

Wir müssen drei schaffen. Die ersten beiden sind statische Inhalte, daher werde ich sie nicht im Detail behandeln. Erstellen Sie eine Datei unter www/views/settings/tab.about.html und fügen Sie den folgenden Inhalt hinzu.

<ion-view view-title="About" hide-back-button="true">
  <ion-content>
    <div class="list">
      <a href="https://github.com/gnomeontherun/civinfo-part-3" target="_blank" class="item">
        <h2>Project on GitHub</h2>
        <p>Click to view project</p>
      </a>
      <div class="item" ui-sref="settings.license">
        <h2>License</h2>
        <p>See full license</p>
      </div>
    </div>
  </ion-content>
</ion-view>

Diese enthält eine Vorlage, in der einige Informationen angezeigt werden. 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.

<ion-view view-title="License">
  <ion-content>
    <div class="card">
      <div class="item item-divider">
        The MIT License (MIT)
      </div>
      <div class="item item-text-wrap">
        <p>Copyright (c) 2016 Jeremy Wilken</p>
        <p>Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:</p>
        <p>The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.</p>
        <p>THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</p>
      </div>
    </div>
  </ion-content>
</ion-view>

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 etwas genauer darauf eingehen. Erstellen Sie eine neue Datei unter www/views/settings/tab.preferences.html und fügen Sie den folgenden Inhalt hinzu.

<ion-view view-title="Preferences" hide-back-button="true">
  <ion-content>
    <ul class="list">
      <li class="item item-divider">
        Types of Locations
      </li>
      <li class="item item-toggle" ng-repeat="type in vm.types">
        {{type.type}}
        <label class="toggle">
          <input type="checkbox" ng-model="type.enabled">
          <div class="track">
            <div class="handle"></div>
          </div>
        </label>
      </li>
    </ul>
  </ion-content>
</ion-view>

Diese Ansicht enthält eine Liste von Umschaltern, 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 in der Liste aktivieren oder deaktivieren. Die Umschalttaste ist eine CSS-Komponente. Wir müssen nur eine Checkbox-Eingabe mit dieser speziellen Markup- und CSS-Klassenstruktur verwenden, damit sie als mobile Umschalttasten angezeigt werden.

In dieser Ansicht ist ein Controller in settings.js deklariert, es wird jedoch ein Types-Dienst eingefügt, den wir noch nicht erstellt haben. Wir werden das beheben, indem wir www/js/app.js einen neuen Dienst hinzufügen.

.factory('Types', function() {
  return [
    {type: 'Park', enabled: true},
    {type: 'Hospital', enabled: true},
    {type: 'Library', enabled: true},
    {type: 'Museum', enabled: true}
  ];
})

Dieser Dienst enthält eine Reihe von Ortstypen. Es hat eine Eigenschaft für den Namen jedes Ortstyps und ob er aktiviert oder deaktiviert ist. Wir verwenden die Eigenschaft enabled in der Umschalttaste 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, Einstellungen und Informationen anzeigen. Auf der Registerkarte "Einstellungen" können Sie die Ortstypen ein- oder ausschalten.

Wenn Sie zur Registerkarte "Info" wechseln, können Sie die Lizenz auswählen, um zu sehen, wie sie zu einer anderen Route auf der Registerkarte navigiert. Wenn Sie nach dem Anzeigen der Lizenz zwischen den Einstellungen und der Registerkarte "Info" wechseln, können Sie sehen, dass sich die Registerkarte auch nach Ihrer Abreise an den Lizenzstatus erinnert, was den Status dieser Registerkarten demonstriert.

Der letzte Schritt dieses Lernprogramms besteht darin, die Ortsansicht zu aktualisieren, um mithilfe des Types-Dienstes nur die gewünschten Ortsarten zu laden, und mithilfe des Verlaufsdienstes zu behandeln, wann der Cache neu geladen oder verwendet werden soll.

3. Zwischenspeichern und Verwenden des Verlaufsdienstes

Standardmäßig speichert Ionic die letzten 10 Ansichten zwischen und speichert sie. Viele Apps haben möglicherweise nicht einmal so viele Status, was bedeutet, dass Ihre gesamte App im Speicher bleiben kann. 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 möglicherweise glauben, dass Ihre Status 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 daher vermeiden, Setup-Logik in Ihren Controllern außerhalb von Life-Cycle-Hooks auszuführen. Sie können Caching-Strategien auch mit dem $ionicConfigProvider konfigurieren.

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 zwischengespeichert behalten, wenn der Benutzer auf einen Ort tippt und dann zur Liste zurückkehrt. Wenn wir die Liste bei jedem Besuch automatisch aktualisieren, können Benutzer ihren Platz in der Liste verlieren, nachdem sie einen Ort gescrollt und angezeigt haben.

Wenn ein Benutzer andererseits zur Einstellungsseite und dann zurück zur Ortsliste navigiert, möchten wir die Liste aktualisieren, da er möglicherweise die Arten von Orten geändert hat, die er anzeigen möchte.

Wir werden eine Kombination der zuvor untersuchten Lebenszyklusereignisse mit dem Dienst $ionicHistory verwenden, um eine Logik hinzuzufügen, mit deren Hilfe ermittelt werden kann, wann der Ortsstatus die Liste neu laden soll. Wir möchten auch den Types-Dienst verwenden, um nur die Arten von Orten zu laden, die der Benutzer sehen möchte.

Öffnen Sie www/views/sites/sites.js und aktualisieren Sie es so, dass es dem folgenden Code entspricht. Wir müssen die Art und Weise ändern, in der Daten geladen werden, und den $ionicHistory-Dienst verwenden, um den Verlauf zu überprüfen und festzustellen, wann neu geladen werden muss.

angular.module('App')
.config(function($stateProvider) {
  $stateProvider.state('places', {
    url: '/places',
    controller: 'PlacesController as vm',
    templateUrl: 'views/places/places.html'
  });
})
.controller('PlacesController', function($http, $scope, $ionicLoading, $ionicHistory, Geolocation, Types) {
  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 = function load() {
    $ionicLoading.show();
    var url = base;
    var query = [];
    angular.forEach(Types, function(type) {
      if (type.enabled === true) {
        query.push(type.type.toLowerCase());
      }
    });
    url += '&query=' + query.join('|');

    if (token) {
      url += '&token=' + token;
    }

    $http.get(url).then(function handleResponse(response) {
      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();
    }
  });
});

Zunächst haben wir die Art und Weise geändert, in der die URL für unsere API erstellt wird, um vom Laden nur von Parks zum Laden der angeforderten Typen zu wechseln. Wenn Sie dies mit der vorherigen Version vergleichen, wird hauptsächlich angular.forEach verwendet, um jeden Typ zu durchlaufen und ihn der URL hinzuzufügen.

Wir haben auch das Verhalten des Dienstes $ionicLoading geändert. Anstatt sofort zu starten, wenn der Controller zum ersten Mal ausgeführt wird, lösen wir ihn jedes Mal aus, wenn die Methode vm.load() aufgerufen wird. Dies ist wichtig, da der Controller zwischengespeichert wird und standardmäßig keine Daten neu lädt.

Die größte Änderung ist der $ionicView.beforeEnter-Lebenszyklus-Ereignishandler. Dieses Ereignis wird ausgelöst, bevor die Ansicht zur nächsten aktiven Ansicht wird, und ermöglicht uns einige Einstellungen. Wir verwenden die $ionicHistory.forwardView() Methode, um Informationen über die letzte Ansicht abzurufen, in der sich der Benutzer befand.

Wenn es sich um das erste Laden handelt, ist dieses leer, andernfalls werden einige Daten zum letzten Status zurückgegeben. Wir prüfen dann, ob der vorherige Status der Ortsstatus war, und verwenden in diesem Fall die zwischengespeicherte Ergebnisliste. Da wir weniger als 10 Zustände haben, wissen wir auch, dass der Zustand immer im Speicher bleibt.

Andernfalls werden die zwischengespeicherten Werte zurückgesetzt und eine neue Datenladung ausgelöst. Dies bedeutet, dass jedes Mal, wenn ich nach dem Aufrufen der Einstellungen zur Ortsansicht zurückkehre, die Daten neu geladen werden. Abhängig von Ihrem App-Design möchten Sie wahrscheinlich unterschiedliche bedingte Regeln für das Caching und das Neuladen entwerfen.

Der Verlaufsdienst bietet weitere Informationen, z. B. den gesamten Verlaufsstapel, die Möglichkeit, den Verlauf zu ändern, Details zum aktuellen Status und vieles mehr. Sie können diesen Dienst verwenden, um die Erfahrung während der Navigation in der App zu optimieren.

Wir werden zwei weitere kleine Änderungen an unserer Ortsvorlage vornehmen. Öffnen Sie www/views/sites/sites.html und ändern Sie den Titel in Local Places.

1	<ion-view view-title="Local Places" hide-back-button="true">

Aktualisieren Sie als Nächstes die unendliche Bildlaufkomponente mit einem weiteren Attribut, der immediate-check, um zu verhindern, dass die unendliche Bildlaufkomponente gleichzeitig mit dem ersten Laden Daten lädt. Dies hilft im Wesentlichen dabei, doppelte Anforderungen für mehr Daten zu vermeiden.

1	<ion-infinite-scroll on-infinite="vm.load()" ng-if="vm.canLoad" immediate-check="false"></ion-infinite-scroll>

Zu diesem Zeitpunkt haben wir eine ziemlich solide App erstellt, die eine Reihe von Funktionen bietet. Wir werden diese Serie mit einem letzten Tutorial abschließen, das sich mit Cordova befasst und einige der Gerätefunktionen integriert, z. B. den Zugriff auf GPS-Daten.

Abschluss

Die Navigation mit Ionic beginnt immer mit der Deklaration einiger Zustände. Das Aufdecken dieser Navigation kann auf verschiedene Arten erfolgen, wie wir in diesem Tutorial gesehen haben. Folgendes haben wir in diesem Tutorial behandelt:

Die Seitenmenükomponenten erleichtern das Erstellen von ein oder zwei Seitenmenüs, die bei Bedarf oder durch Wischen aktiviert werden können.
Tabs können zustandslos oder zustandsbehaftet sein. Stateful-Registerkarten können individuelle Ansichten mit separaten Navigationsverläufen haben.
Registerkarten bieten viele Konfigurationsoptionen für die Anzeige der Symbole und des Texts.
Eine Umschalttaste ist eine CSS-Komponente, die wie ein Kontrollkästchen funktioniert, jedoch für Mobilgeräte konzipiert ist.
Sie können den Dienst $ionicHistory verwenden, um mehr über den Navigationsverlauf der App zu erfahren und die Erfahrung anzupassen.