Erste Schritte mit Ionic Services

Was Sie erstellen werden

1. Einführung in die Dienstleistungen

Im ersten und zweiten Teil dieser Serie von Ionic haben wir die lokale Entwicklung eingerichtet und einige Ansichten erstellt, um eine Liste von Parks mit einigen Ionic-Komponenten zu laden, z. B. Basisnavigation und Listenkomponenten. In diesem Lernprogramm werden wir untersuchen, wie Ionic eine Reihe von Diensten anbietet, mit denen Sie die App und die Schnittstelle programmgesteuert verwalten können.

Zuvor haben wir gezeigt, wie Ionic interaktive Funktionen durch Komponenten bereitstellt, die als HTML-Elemente verwendet werden (implementiert als Angular-Direktiven). Es gibt jedoch einige Elemente der Benutzeroberfläche, die als mit HTML instanziierte Komponenten nicht sinnvoll sind, z. B. ein Loader oder ein Aktionsblatt-Overlay.

Beginnen wir mit einem Blick auf die Rolle, die Services in Ihrer App spielen. Ich habe drei Haupttypen von Diensten in Ionic identifiziert:

  • Komponentendienste
  • Delegieren von Diensten
  • Hilfsdienstleistungen

Komponentendienste

Komponentendienste ermöglichen die Verwendung von Komponenten, verwenden jedoch nicht HTML, um sie zu deklarieren (wie wir es mit gesehen haben) ionNavBar) Sie werden mit JavaScript verwaltet. Mit anderen Worten, Sie nutzen diese Komponenten, indem Sie Ihren Controllern Code hinzufügen. Im folgenden Beispiel werden wir zwei davon verwenden.

Es kann hilfreich sein, diese Dienste als Komponenten mit einem Lebenszyklus zu betrachten. Normalerweise möchten Sie, dass sie an einem bestimmten Punkt geladen werden, und nachdem sie fertig sind, werden sie entfernt. Zum Beispiel, $ ionicModal Ermöglicht das Erstellen eines Modals. Modale haben einen Lebenszyklus, sie werden aus bestimmten Gründen geöffnet und geschlossen. Möglicherweise verfügen Sie über eine Modalität, die Benutzer dazu auffordert, sich anzumelden, oder sie können das Modell schließen, um es zu überspringen, wodurch der Lebenszyklus abgeschlossen wird.

Delegieren von Diensten

Einige Komponenten verfügen über einen begleitenden Delegatendienst, der die Komponente ändern oder verwalten kann. Möglicherweise möchten Sie eine Komponente programmgesteuert bearbeiten, nachdem sie erstellt wurde, und diese Dienste sollen dies ermöglichen. Sie werden so benannt, da sie das Verhalten an die Komponente delegieren.

Das ionNavBar Komponente hat einen Delegatendienst aufgerufen $ ionicNavBarDelegate. Dieser Dienst hat mehrere Methoden, aber ein Beispiel ist der Titel() Methode, mit der Sie den Titel der Navigationsleiste aktualisieren können. Der Umfang der für jeden Delegiertendienst verfügbaren Funktionen ist unterschiedlich, sollte jedoch in der Dokumentation anhand des Namens leicht zu erkennen sein.

Assistive Services

Die letzte Kategorie sind Dienste, die unterstützende Funktionen oder Informationen bereitstellen. Es gibt nur wenige von ihnen und sie passen nicht ganz in die beiden anderen Kategorien. Einige Beispiele sind:

  • $ ionicPlatform: hilft Ihnen, mit der Gerätehardware zu interagieren
  • $ ionicGesture: Ermöglicht die Handhabung von Gestenereignissen
  • $ ionicPosition: Zeigt die Position der Elemente auf dem Bildschirm an

Diese Hilfsdienste helfen Ihnen bei der Entwicklung von Logik oder beim Umgang mit Interaktionen. Sie generieren oder modifizieren keine Komponenten alleine.

In diesem Tutorial werden auch einige andere Dinge behandelt:

  • CSS-Komponenten, die nur visuell sind und im Gegensatz zu ihren JavaScript-Komponentengeschwistern keine Funktionslogik bieten
  • Ionische Ereignisse, die wir nutzen können, um in Ereignisse einzuhängen, zum Beispiel, wenn die Ansicht geladen wird oder das Laden beendet ist
  • Weitere Navigationsfunktionen, mit denen Sie problemlos navigieren, den Status verwalten und Schaltflächen zur Navigationsleiste hinzufügen können

Quelldaten

In diesem Lernprogramm werden wir die im vorherigen Lernprogramm gestartete App erweitern. Nur zur Erinnerung: Die App bietet Benutzern Informationen zu ihren lokalen öffentlichen Einrichtungen wie Bibliotheken und Parks. Die App zeigt bereits eine Liste von Parks in Chicago an. Jetzt können Sie Ladekennzeichen anzeigen, einzelne Parkdetailbildschirme anzeigen, ein Aktionsmenü öffnen und einige grundlegende Freigabefunktionen implementieren.

Sie können das abgeschlossene Projekt in GitHub anzeigen. Das letzte Beispiel ist auch als Vorschau verfügbar.

Sie können die Dateien herunterladen oder mit Git auschecken. Sobald Sie die Dateien auf Ihrem Computer haben, müssen Sie sie ausführen npm installieren das Projekt einrichten. Wenn Sie den Code mit Hilfe von Git auschecken, können Sie mitcodieren, wenn Sie das Repo auf den Endpunkt des letzten Teils durch Ausführen zurücksetzen git checkout -b start. Sobald Sie die Dateien haben, starten Sie Ihren Ionic-Server, indem Sie ihn ausführen ionischer Aufschlag.

2. Implementierung eines Ladeindikators

Derzeit lädt die App Daten und es gibt einen kleinen Kreisindikator von der unendlichen Bildlaufkomponente, der angezeigt wird, bis sie geladen wird. Wir möchten jedoch eigentlich die gesamte App überlagern, sodass die App ganz einfach geladen wird.

Das $ ionicLoading Ein Dienst ist sehr nützlich, um dem Benutzer die Interaktion mit der App zu überlagern und zu blockieren, bis die Daten geladen sind. Es ist konfigurierbar. Sie können beispielsweise festlegen, ob ein Ladesymbol oder ein Text angezeigt wird, ob Sie den Hintergrund wünschen oder nicht, oder ob er nach einer bestimmten Zeit automatisch ausgeblendet werden soll. Sie können den Loader in der folgenden Abbildung sehen.

Öffnen www / views / places.js um einige Änderungen vorzunehmen, um den Loader zu verwenden. Zuerst müssen wir den Dienst durch Hinzufügen in unsere Steuerung einspeisen $ ionicLoading zu den Funktionsparametern. Der Service ist ziemlich einfach, es gibt nur zwei Methoden, Show() und verbergen(). Wir können den Loader ein- und ausblenden lassen, indem wir die Methoden aufrufen, die Sie hier in diesem Snippet sehen.

.Controller ('PlacesController', Funktion ($ http, $ scope, $ ionicLoading, Geolocation) var vm = this; var base = 'https://civinfo-apis.herokuapp.com/civic/places?type=park&location=' + Geolocation.geometry.location.lat + ',' + Geolocation.geometry.location.lng; var token = "; vm.canLoad = true; vm.places = []; $ ionicLoading.show (); vm.load = function load () var url = base; 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. verbergen(); ); ; );

Das $ ionicLoading.show () Die Methode wird aufgerufen, sobald der Controller geladen ist, dh er wird sofort ausgelöst. Nun müssen wir dem Loader mitteilen, dass er sich verstecken soll, nachdem die Daten vollständig geladen wurden $ sendung.

Sie können feststellen, dass die $ ionicLoading.hide () Die Methode wird jedes Mal aufgerufen, wenn die Daten geladen werden. Das ist kein Problem. Da der Loader bereits ausgeblendet ist, hat dieser Aufruf keine Auswirkungen.

Wir haben jetzt einen Ionischen Service implementiert. Ziemlich einfach. Recht? Einige sind etwas komplexer und wir arbeiten an einem anderen Beispiel anhand des Aktionsblatts. Bevor wir jedoch dazu kommen, möchten wir unsere App dahingehend erweitern, dass sie sowohl zwei Ansichten für die Notizenliste als auch eine einzelne Notiz hat.

3. Notizansicht hinzufügen

Im nächsten Schritt erstellen Sie eine neue Ansicht, die mehr Details zu einem bestimmten Park anzeigt. Die Informationen können von Park zu Park variieren, aber wir werden uns darauf konzentrieren, ein Bild, eine Website, ein Telefon und Adressinformationen zu erhalten. Die Ergebnisse des Hinzufügens dieser Ansicht werden hier angezeigt.

Um eine neue Ansicht zu erstellen, erstellen Sie eine Datei unter www / views / place / place.js und fügen Sie den unten angezeigten Inhalt hinzu. Dies ist die Controller- und Statusdefinition für die Platz Aussicht.

angle.module ('App') .config (Funktion ($ stateProvider) $ stateProvider.state ('place', url: '/ places /: place_id'), Controller: 'PlaceController as vm', templateUrl: 'views / place / place.html ', beheben Sie: Place: function ($ http, $ stateParams) var url =' https://civinfo-apis.herokuapp.com/civic/place?place_id= '+ $ stateParams.place_id; return $ http.get (url););) .controller ('PlaceController', Funktion ($ scope, Place) var vm = this; vm.place = Place.data.result;);

Wenn Sie einen Blick auf die config () Methode, Sie sehen, dass wir einen neuen Zustand deklarieren. Dies ist der UI-Router in Aktion. Sie sollten daher in der Dokumentation des UI-Routers alle Details zum Deklarieren von Zuständen nachlesen.

Die Objektdefinition zeigt, dass wir eine URL von verwenden / places /: place_id. Wenn Sie einen Teil der URL mit einem Doppelpunkt vor sehen, z. B. : place_id, es kennzeichnet diesen Teil des Pfads als Zustandsparameter. Der Staat ist in der Lage, den Wert abzurufen und Ihnen den Wert mit zur Verfügung zu stellen $ stateParams Objekt. Zum Beispiel, / places / 12345 würde ergeben $ stateParams.place_id = '12345'.

Sie haben die anderen Teile der Definition zuvor gesehen, mit Ausnahme der Entschlossenheit Eigentum. Mit dieser Funktion können Sie anfordern, dass verschiedene Funktionen aufgerufen werden, bevor der Status erstellt wird. Es akzeptiert ein Objekt von Schlüssel- und Funktionswerten, also haben wir es hier Platz als Schlüssel wird das Ergebnis der Funktion zugewiesen.

In der Funktion können Parameter zum Einfügen akzeptiert werden, ähnlich wie bei einer Steuerung. Hier die $ http und $ stateParams Dienste werden injiziert. Die Funktion verwendet dann den Wert aus place_id über die URL übergeben und eine HTTP-Anforderung erstellt und zurückgegeben. Dies wird im Wesentlichen in der Ortsansicht ausgeführt, es sei denn, der Controller führt dies aus.

Die Auflösungsfunktion ist intelligent genug, um festzustellen, dass bei der Rückgabe eines Versprechens die Auflösung des Versprechens abgewartet wird, bevor der Status erstellt wird. Mit anderen Worten, $ http.get () Gibt ein Versprechen zum Laden der Daten zurück und der ui-router wartet, bis die Daten verfügbar sind, bevor der Zustand erstellt und der übergeben wird Platz zum Controller. Die Auflösungsfunktion ist sehr nützlich, um Daten in Ihren Apps vorab zu laden. Dies ist ein recht einfaches Beispiel für die Nutzung dieser Daten.

Nachdem wir den Status definiert haben, wird der Controller deklariert und weist die resultierenden Daten zu Platz (das ist was im Staat gelöst wurde) zu vm.place. Wir müssen auch unsere Vorlage für diesen Status erstellen. Erstellen Sie also eine neue Datei unter www / views / place / place.html und fügen Sie den folgenden Inhalt hinzu.

  
vm.place.formatted_address

vm.place.website vm.place.formatted_phone_number

Diese Vorlage beginnt mit der Verwendung von ionView Um den Inhalt zu verpacken, kann das ionische Navigationssystem den Inhalt ordnungsgemäß verfolgen. Es weist auch einen Titel zu, der auf dem Namen des Ortes basiert. Das ionContent Der Wrapper enthält den Hauptinhalt, und Sie werden feststellen, dass die Vorlage CSS-Klassen anstelle von Elementen zum Erstellen einer Kartenkomponente verwendet.

Im vorigen Teil haben wir darüber gesprochen, dass einige Komponenten nur CSS-Klassen sind. Die Karte ist ein Beispiel dafür. Konzeptionell ist es wie eine Liste. Der innere Inhalt ist vertikal wie eine Liste gestapelt, der Stil wirkt jedoch eher wie eine Karte. Dies nutzt die Kartenstile, die Funktionen wie Bildunterstützung, Symbole und andere übersichtliche Layouts in der Dokumentation enthalten.

Es gibt ein paar ngIf Richtlinien verwendet, da es keine Garantie dafür gibt, dass die zurückgegebenen Daten eine Telefonnummer oder Website haben. Das ngIf Direktive stellen Sie sicher, dass keine leeren Werte angezeigt werden. Es verwendet auch ngHref oder ngSrc um Links richtig zu erstellen.

Sie werden auch die Verwendung des erkennen tel: // Protokoll, das bei Verwendung an einem Telefon den Benutzer auffordert, die Nummer bei seiner Auswahl anzurufen. Es ist eine praktische Funktion, die einfach zu bedienen ist und sich gut in ein physisches Gerät integrieren lässt. Einige Programme auf Ihrem Computer, wie beispielsweise Skype, versuchen je nach Ihren Einstellungen möglicherweise auch zu telefonieren.

Dies sollte uns eine funktionierende Sicht geben, aber wie navigieren wir dahin? Wir müssen einige kleine Änderungen vornehmen, damit die Navigation in der Ortsansicht funktioniert.

4. Zwischen Ansichten navigieren

Der ui-router bietet eine ui-sref Direktive, die zum Verknüpfen von Elementen mit einem anderen Status verwendet wird. In diesem Fall möchten wir, dass jedes Element in der Liste der Ortsansicht mit der entsprechenden Ortsansicht verknüpft wird.

Öffnen www / views / places / places.html und fügen Sie die Direktive hinzu, die mit jedem Ort verknüpft werden soll. Aktualisieren Sie die ionItem mit dem neuen Attribut hier.

Das ui-sref Die Direktive hat ein Format, in dem Sie über einen Namen auf einen anderen Staat verweisen können, nicht auf eine URL, wie Sie es tun href. Dies ist praktisch, da sich URLs ändern können. Es kann auch Parameter akzeptieren, die zum Erstellen der URL verwendet werden sollen. In unserem Fall möchten wir die URL übergeben place.place_id Eigentum. Das ui-sref nimmt Eigenschaften als Objekt an, also Zustandsname (param: value) ist die Syntax.

Sehen Sie sich nun die App in der Vorschau an und wählen Sie einen Park aus, um zum neuen zu navigieren Platz Ansicht und Sie können in der Adressleiste nachsehen, ob die URL hinzugefügt wird place_id Wert. Jetzt haben wir jedoch ein Problem. Wie kommen wir zur Liste zurück??

Wir nehmen das ionNavBackButton Funktionalität, um uns eine automatische Zurück-Taste zu geben. Öffnen www / index.html und fügen Sie den folgenden Ausschnitt in das ionNavBar. Dies fügt eine Zurück-Schaltfläche hinzu, die nur angezeigt wird, wenn es einen Ort gibt, an den Sie zurückkehren können.

   Zurück  

Die Navigation von Ionic ist intelligent genug, um den Verlauf während der Verwendung der App zu verfolgen. Wenn es eine vorherige Ansicht gibt, zu der zurückgekehrt werden kann, wird die Zurück-Schaltfläche angezeigt. Andernfalls wird es einfach ausgeblendet.

Wir möchten auch erklären, dass in der Ortsansicht niemals die Zurück-Schaltfläche angezeigt werden soll. Dies können Sie durch Hinzufügen von hideBackButton Direktive in www / views / places / places.html.

Während der Entwicklung und Vorschau im Browser wird der Verlauf manchmal zurückgesetzt. Wenn Sie sich beispielsweise in der Ortsansicht befinden und eine Änderung in Ihrem Editor speichern, wird der Browser automatisch neu geladen und setzt den Verlauf zurück. In diesem Fall erscheint die Zurück-Schaltfläche nicht wie erwartet. Sie können dieses Problem beheben, indem Sie zur Liste zurückkehren und die Aktualisierung aktualisieren, um den Verlauf direkt einzustellen.

Wir haben gute Fortschritte gemacht, aber wenn Sie jetzt auf ein Element in der Liste tippen, wartet es mit dem Übergang zur neuen Ansicht, bis der API-Aufruf mit den Daten zurückgegeben wird. Es erscheint Ihnen vielleicht schnell, aber manchmal kann es langsam sein, wenn die API langsam ist. Dies könnte dazu führen, dass jemand der Meinung ist, dass die App stecken bleibt, langsam ist oder dass sie ihren Tap nicht registriert hat, da sie nicht sofort auf das Tap reagiert. Wir befassen uns mit einigen Lebenszyklusereignissen, die uns dabei helfen, einen Lader zur Anzeige während dieser Zeit einzurichten.

5. Hinzufügen des Loader während Übergängen

Um eine bessere Benutzererfahrung zu bieten, verwenden wir die $ ionicLoading Dienst, um die App zu überlagern, während die Daten für die Ortsansicht geladen werden. Um zu wissen, wann der Loader ein- und ausgeblendet werden soll, verwenden wir die Lebenszyklusereignisse.

Diese Ereignisse werden basierend auf Navigationsereignissen ausgelöst, z. B. vor oder nach dem Aufrufen einer Ansicht oder vor oder nach dem Verlassen einer Ansicht. Sie können alles tun, was zu diesem Zeitpunkt möglicherweise erforderlich ist, z. B. das Zurücksetzen einiger Daten oder das Übermitteln von Nutzungsinformationen.

Um dies zu demonstrieren, fügen wir der Bereichssicht einen Ereignislistener hinzu, der den Loader auslöst, wenn Sie zu der Ortsansicht navigieren. Öffnen www / views / places / places.js und fügen Sie dem Controller Folgendes hinzu. Das müssen Sie auch sicherstellen $ scope wird in den Steuerungsfunktionsparametern deklariert, damit sie verfügbar ist.

$ scope. $ on ('$ ionicView.beforeLeave', function () $ ionicLoading.show (););

Dies ist ein Bereichsereignis-Listener, der auf das wartet $ ionicView.vorLeave Ereignis (siehe Ereignisse im Winkelbereich). Ionic überträgt dieses Ereignis an Ihren Controller und ruft die hier deklarierte anonyme Funktion auf. Diese Funktion ruft einfach die $ ionicLoading.show () Methode, um den Lader einzuschalten.

Dadurch wird der Loader angezeigt, sobald der Benutzer auf ein Element tippt. Jetzt fügen wir der Ortsansicht ein ähnliches Snippet hinzu, mit dem der Lader ausgeblendet wird, wenn der Ladevorgang der Ansicht abgeschlossen ist. Öffnen www / views / place / place.js und fügen Sie dem Controller Folgendes hinzu. Sie müssen beide hinzufügen $ ionicLoading und $ scope zu den Controller-Funktionsparametern, da sie derzeit nicht injiziert werden.

$ scope. $ on ('$ ionicView.afterEnter', function () $ ionicLoading.hide (););

Dadurch wird auf ein anderes Bereichsereignis gewartet, das nach Abschluss der Ansicht ausgelöst wird, und ruft die Funktion zum Ausblenden des Ladeprogramms auf. Der Loader wird in der Zeit zwischen dem Moment angezeigt, in dem der Benutzer einen Ort antippt, um die Ansicht anzuzeigen, bis die Ansicht vollständig geladen ist. Sie könnten andere Ereignisse ausprobieren und sehen, wann sie ausgelöst werden.

Das Letzte, was wir in diesem Tutorial tun, ist die Einrichtung einer Schaltfläche zum Teilen von Aktionsblättern, mit der Sie auf Twitter, Facebook oder E-Mail posten und die Parkinformationen teilen können.

6. Freigabetaste mit Action Sheet Service

Aktionsblätter sind sehr nützlich, um eine Liste zusätzlicher Optionen bereitzustellen. Dies ist in der Regel für Situationen gedacht, in denen Sie eine Liste mit gruppierten Aktionen anzeigen möchten. In unserem Beispiel handelt es sich um eine Liste mit Möglichkeiten, die Parkinformationen gemeinsam zu nutzen. Das Aktionsblatt, das wir erstellen werden, sieht so aus.

Der Aktionsblattdienst ist etwas komplexer als der Ladedienst, da er Konfigurations- und Benutzereingaben übernimmt. Öffnen www / views / place / place.js und fügen Sie diese neue Methode Ihrem Controller hinzu. Das müssen Sie auch sicherstellen $ ionicActionSheet wird in Ihren Controller eingespritzt.

vm.openSheet = function () var sheet = $ ionicActionSheet.show (titleText: 'Diesen Ort freigeben'), Schaltflächen: [Text: 'Über Twitter freigeben', Text: 'Über Facebook freigeben, Text : 'Per E-Mail freigeben'], cancelText: 'Cancel', buttonClicked: Funktion (Index) if (Index === 0) window.open ('https://twitter.com/intent/tweet?text= '+ encodeURIComponent (' Ich habe diesen großartigen Ort gefunden! '+ vm.place.url)); else if (index === 1) window.open (' https://www.facebook.com/sharer/sharer .php? u = '+ vm.place.url); else if (index === 2) window.open (' mailto:? subject = '+ encodeURIComponent (' Ich habe diesen großartigen Ort gefunden! ') +' & body = '+ vm.place.url); sheet ();); ;

Das openSheet () Die Methode ist für das Erstellen des Aktionsblatts verantwortlich. Es tut dies durch Aufrufen $ ionicActionSheet.show (), die eine Funktion zurückgibt, auf der gespeichert ist Blatt. Auf diese Weise können Sie das Blatt schließen, wenn Sie es später fertig haben, indem Sie es aufrufen Blatt(). Das Show() Die Methode nimmt ein Objekt mit einer Reihe von Eigenschaften, die wir aufteilen. Es gibt mehrere Beispiele für Ionische Dienste, die diesem Muster folgen, wie Modalitäten und Popovers, sodass Sie sie jederzeit schließen können.

Das Blatt verwaltet den Titel mit titleText Diese Eigenschaft wird normalerweise verwendet, um den Benutzer über die Verwendung der Schaltflächen zu informieren. Das cancelText Diese Eigenschaft akzeptiert eine Zeichenfolge, die zum Aktivieren einer Abbrechen-Schaltfläche verwendet wird. Wenn Sie dies nicht angeben, wird keine Schaltfläche zum Abbrechen ausgewählt. Sie können den Vorgang auch abbrechen, indem Sie im Hintergrund außerhalb der Tasten tippen.

Um die Tasten zu deklarieren, verwenden Sie die Tasten Eigenschaft, die ein Array von Objekten ist, die eine Text Eigentum. Sie werden in der Reihenfolge angezeigt, in der sie deklariert wurden. Sortieren Sie sie entsprechend.

Das buttonClicked Diese Eigenschaft übernimmt eine Funktion und übergibt den Index der ausgewählten Schaltfläche (wie in deklariert) Tasten). Daher können Sie anhand des übergebenen Index herausfinden, was zu tun ist. In dieser Funktion wird der Index geprüft und entweder Facebook, Twitter oder Benutzerverbindungen geöffnet mailto: den E-Mail-Client auslösen.

Abhängig von den Benutzereinstellungen und möglicherweise dem Gerät können diese Links in den Apps von Facebook, Twitter oder E-Mail geöffnet werden. Die Links werden jedoch zumindest außerhalb Ihrer App (in einem externen Browser) geöffnet. Das letzte Stück ist der Aufruf von Blatt() Methode, die das Aktionsblatt schließt.

Das Aktionsblatt ist jetzt einsatzbereit, aber wir müssen noch eine Schaltfläche hinzufügen, um das Blatt auszulösen. Dazu fügen wir der Ortsansicht, die anruft, eine Navigationsschaltfläche hinzu vm.openSheet (). Öffnen www / views / place / place.html und füge das hinzu ionNavButtons Ausschnitt zwischen dem ionView und ionContent.

    

Hier ist noch eine weitere nützliche ionische Navigationsfunktion, mit der Sie einer Navigationsansicht eine Navigationsschaltfläche hinzufügen können ionNavButtons. Alle Schaltflächen darin werden zur Navigationsleiste hinzugefügt und Sie können konfigurieren, auf welcher Seite sie angezeigt werden.

An diesem Punkt funktioniert alles. Benutzer können das Aktionsblatt öffnen, um den Park mit ihren Freunden zu teilen.

Fazit

In diesem Tutorial haben wir uns mit den Ionischen Diensten und ihrer Verwendung beschäftigt. Auf dem Weg entdeckten wir eine Reihe weiterer ionischer Merkmale:

  • Ionische Dienste werden in Controllern aufgerufen und haben normalerweise einen Lebenszyklus unabhängig von der aktuellen Ansicht.
  • Das $ ionicLoading Dieser Dienst ist nützlich, um ein Ladekennzeichen ein- und auszublenden, während Ihre App Daten lädt oder die Benutzeroberfläche anderweitig blockieren muss.
  • Das $ ionicActionSheet Der Dienst zeigt dem Benutzer eine Liste von Schaltflächen, die die App überlagern, um einen einfachen Zugriff auf wichtige Aktionen zu ermöglichen.
  • Ionische Navigationsfunktionen umfassen auch die ionNavBackButton um automatisch eine Zurück-Schaltfläche anzuzeigen, wenn ein Rücksprung möglich ist. ionNavButtons ermöglicht das Hinzufügen von Navigationsleistenschaltflächen zu bestimmten Ansichten.
  • Ionic verfügt wie die Karte über CSS-Komponenten, die keine speziellen interaktiven Funktionen besitzen und nur zur Deklaration von CSS-Klassen verwendet werden.

In der nächsten Ausgabe werden wir uns einige Navigationsfunktionen von Ionic genauer ansehen.

Erstellen Sie eine ionische Vorlage und gewinnen Sie 1.000 €

Wenn Sie bereits mit dem Ionic-Framework vertraut sind, möchten Sie vielleicht den Envato Most Wanted-Wettbewerb für Ionic-Vorlagen in Betracht ziehen. Wie? Erstellen Sie eine einzigartige Ionic-Vorlage und reichen Sie diese bis zum 27. April 2016 an Envato Market ein.

Die fünf besten Vorlagen erhalten 1.000 US-Dollar. Interessiert? Weitere Informationen zu den Anforderungen und Richtlinien des Wettbewerbs finden Sie auf der Website des Wettbewerbs.