Share
Was Sie erstellen werdenIn diesem Lernprogramm werden wir zusammen unsere erste Ionic-App erstellen und die Grundlagen der JavaScript-Komponenten von Ionic lernen. Diese Komponenten bieten Ihrer App einfachen Zugriff auf Funktionen wie Navigations- und Navigationsleisten, unendliche Bildlauffunktionen und Listen. Wenn Sie Ionic noch nicht eingerichtet haben oder die Verwendung der Ionic-CLI aktualisieren müssen, können Sie das erste Lernprogramm dieser Serie überprüfen.
Der Begriff Komponenten wird in der Frontend-Entwicklung etwas missbraucht, da viele Frameworks eine eigene Vorstellung haben, die eine Komponente beschreibt. Tatsächlich können Webkomponenten als offizieller HTML-Standard das Konzept weiter verkomplizieren. Definieren Sie also eindeutig, was eine Komponente in Ionic ist.
Im Allgemeinen ist eine Komponente eine Implementierung eines Satzes von Merkmalen, die durch irgendeine Form der Codierungskonvention gekapselt werden. Mit anderen Worten, Sie können sich eine Komponente als eine Möglichkeit vorstellen, ein bestimmtes Feature vom Rest der Anwendung zu isolieren. Sie können darüber nachdenken, wie es in HTML verschiedene Arten von Formulareingaben gibt, und jede davon ist eine Art von Komponente, die über bestimmte Funktionen verfügt.
In Ionic gibt es zwei Arten von Komponenten, CSS und JavaScript. CSS-Komponenten werden als eine Reihe von CSS-Klassen implementiert, die ein Element ändern, um ihm ein bestimmtes Aussehen zu verleihen, z. B. eine Kopfleiste.
JavaScript-Komponenten sind technisch als Angular-Direktiven implementiert und werden als HTML-Elemente in der Anwendung verwendet. Sie bieten eine reichhaltigere Ausstattung. Dies beinhaltet normalerweise die Möglichkeit für Benutzer, mit ihr oder der Anwendung zu interagieren, um die Komponente anderweitig zu verwalten. Registerkarten ermöglichen beispielsweise das Anzeigen oder Ausblenden von Inhalt basierend auf dem Benutzer, der eine Registerkarte auswählt.
In diesem Tutorial konzentrieren wir uns auf einige der JavaScript-Komponenten. Später in dieser Serie werden CSS-Komponenten genauer betrachtet.
Manchmal implementiert Ionic eine Komponente sowohl als CSS- als auch als JavaScript-Komponente, z. B. als Tabs-Komponente. Das heißt, Sie entscheiden, welchen Sie verwenden möchten. Generell empfehle ich die JavaScript-Implementierung. In den meisten Fällen ist der Aufwand für die Verwendung der JavaScript-Komponente vernachlässigbar und ich glaube, damit wird die Verwendung Ihres Codes einfacher.
In diesem Lernprogramm erstellen wir eine App von Grund auf und wir werden die App in der restlichen Serie weiter verbessern. Die Voraussetzung dieser App ist die Erstellung einer Bürgerinformations-App, die Benutzern Informationen über ihre lokalen Einrichtungen wie Bibliotheken und Parks zur Verfügung stellt.
In diesem Lernprogramm erstellen wir zunächst eine App, die eine Liste der Parks in Chicago anzeigt und mit unendlichem Bildlauf die Ergebnisse so lange lädt, wie sie verfügbar sind. In den nächsten Tutorials werden wir die Funktionen der App erweitern.
Ich habe eine API erstellt, die die Informationen bereitstellt, die die App benötigt. Die API basiert auf den Google Maps-APIs. Sie können die API selbst ausführen, es ist jedoch erforderlich, einen benutzerdefinierten API-Schlüssel von Google zu erhalten. Anweisungen dazu finden Sie im API-Projekt. Wenn bei der Verwendung der bereitgestellten API Probleme auftreten, z. B. wenn jemand die API missbraucht und die API-Nutzungsbeschränkungen überschreitet, kann die Ausführung einer eigenen Version hilfreich sein.
Sie können eine Vorschau der laufenden App auf Heroku anzeigen und das abgeschlossene Projekt in GitHub anzeigen. Ich ermutige Sie jedoch, die App mit mir zu verfolgen und zu bauen.
Zunächst müssen Sie ein neues Projekt beginnen. Wir können dies tun, indem Sie den folgenden Befehl ausführen:
ionic start civinfo https://github.com/ionic-in-action/starter
Dies lädt ein Starter-Bundle herunter, das eine leere Ionic-Vorlage enthält, um uns den Start zu erleichtern (erstellt für die Verwendung mit meinem Buch Ionic in Action). Geben Sie das Verzeichnis ein, cd civinfo, und Renn ionischer Aufschlag.
Sie können jetzt eine Vorschau einer leeren App unter http: // localhost: 8100 (oder an dem von Ionic festgelegten Port) laden. Ich empfehle, die Entwickler-Tools Ihres Browsers zu öffnen, um zu bestätigen, dass ein leerer Bildschirm angezeigt wird. Ja, es sollte ein weißer Bildschirm sein. Ich empfehle Ihnen außerdem, die Geräteemulation von Chrome zu verwenden, während Sie eine Vorschau Ihrer App anzeigen.
Die Navigation ist so wichtig, dass wir hier mit dem Design unserer App beginnen sollten. Die primären Navigationskomponenten sind ionNavBarund ionNavView. Die meisten Apps verfügen über eine Design-Funktion, bei der es eine Navigationsleiste mit verschiedenen Titeln und Aktionsschaltflächen gibt und der Rest des Bereichs dem Inhalt der aktuellen Ansicht gewidmet ist.
Das ionNavBarund ionNavView Komponenten bieten diese Funktionalität mit eingebauter Intelligenz, um uns zu unterstützen. Unsere App wird am Ende mehrere Routen haben, aber wir bauen nur eine in diesem Tutorial.
Ionic verwendet die UI-Router unter der Haube, um Navigation und Routing zu verwalten. Wenn Sie damit vertraut sind, erkennen Sie die Implementierung in Ionic. Es gibt viele Nuancen, aber wir halten es in diesem Tutorial einfach. Die gebräuchlichste und einfachste Anwendung besteht darin, jede der verschiedenen Seiten Ihrer App als a zu definieren Zustand, Dies ist der Weg des Ionic / UI-Routers, um eine bestimmte Ansicht zu definieren.
Um uns anzufangen, fügen wir zunächst die beiden Navigationskomponenten hinzu www / index.html Wie du unten siehst, platziere es in den Körper.
Sobald Sie den Code hinzugefügt haben index.html, Sie können die App erneut laden, und es sollte ein grüner Balken oben in der App angezeigt werden.
Sie haben die definiert ionNavBar Komponente, die automatisch am oberen Bildschirmrand angezeigt wird. Wenn wir später individuelle Ansichten erstellen, können diese Ansichten einen Titel und zusätzliche Schaltflächen zur Anzeige übergeben. Es ist intelligent genug zu wissen, wie groß die Navigationsleiste für verschiedene Geräte sein sollte. Dies ist nicht auf allen Plattformen konsistent, daher ist es sehr hilfreich. Die Navigationsleiste erhält eine Klasse von Bar ausgewogen es eine grüne Farbe geben.
Dann ist da noch der ionNavView, Dies ist der Platzhalter, der den Inhalt für jede der Ansichten darstellt. Wenn wir eine Ansicht definiert haben, wird das resultierende Markup hier gerendert und automatisch angepasst, um den verfügbaren Platz zu belegen, nachdem die Navigationsleiste positioniert wurde.
Die Navigationskomponenten sind Beispiele für JavaScript-Komponenten (auch als Angular-Direktiven bezeichnet). Sie sehen aus wie benutzerdefinierte HTML-Tags, und wenn sie zusammen verwendet werden, sind sie intelligent genug, um die Titelleiste mit der aktuellen Ansicht zu synchronisieren und den richtigen Inhalt basierend auf den Navigationsoptionen des Benutzers zu rendern. Um dies in Aktion zu sehen, müssen wir jedoch einige Zustände hinzufügen. Beginnen wir mit dem ersten Zustand, in dem eine Liste von Parks angezeigt wird.
Der Hauptzweck der App besteht darin, eine Liste mit Ressourcen im Zusammenhang mit Bürgern anzuzeigen. Anfangs wird dies eine Liste von Parks sein, aber wir werden sie um andere Ressourcentypen wie Bibliotheken erweitern. Wir möchten einige Funktionen in diese Ansicht aufnehmen:
Nachdem wir nun einige Ziele für diese Ansicht haben, beginnen wir mit dem Hinzufügen unserer JavaScript-Datei, die diese Ansicht registriert. Erstellen Sie eine neue Datei places.js beim www / ansichten / orte / und füge folgendes hinzu:
Accentsconagua
angle.module ('App') .config (Funktion ($ stateProvider) $ stateProvider.state ('places', url: '/ places', Controller: 'PlacesController als vm', templateUrl: 'Ansichten / Orte / Orte .html ');) .controller (' PlacesController ', function () );Wir erklären einen neuen Status für den UI-Router mit der $ stateProvider.state () Methode. Dies ist nur für die Konfiguration in Angulars verfügbar angle.config () Methode. Wenn Sie einen Status angeben, übergeben Sie in diesem Fall zuerst eine Zeichenfolge, um die Route zu benennen setzt. Sie übergeben dann ein Objekt mit verschiedenen Eigenschaften, die den Status definieren, z. B. eine URL, einen Controller und eine Vorlage. In der Dokumentation zum UI-Router finden Sie alle möglichen Konfigurationsoptionen.
Wir haben einen neuen Staat erklärt, benannt setzt, hat ihm eine URL von /setzt, a benannt Regler mit Controller als Syntax und aufgeführt a templateUrl Laden. Dies ist eine ziemlich allgemeine Zustandsdefinition, und Sie sehen sie in der Regel auf die gleiche Weise wie andere Zustände. Der hier deklarierte Controller ist leer, aber wir werden ihn bald hinzufügen.
Diese Vorlage ist ein wesentlicher Bestandteil der Ansicht und beschreibt die visuellen Aspekte dieser Ansicht. Die meiste Ansichtslogik und das Verhalten werden in der Steuerung und in der Vorlage verwaltet. Unser Staat erklärt, dass wir eine HTML-Datei für die Vorlage laden möchten, aber noch keine erstellt haben. Beheben Sie das Problem, indem Sie eine neue Datei erstellen places.html beim www / ansichten / orte / und fügen Sie den Code unten hinzu.
Bisher haben wir in dieser Vorlage erklärt ionView und ionContent Komponenten. Das ionView Komponente ist ein Wrapper, den Sie um eine Vorlage legen, die in den Computer geladen werden soll ionNavView Komponente, die wir zuvor erklärt haben. Das Ansichtstitel Attribut wird auch verwendet, um den Titel zu übergeben, den die Navigationsleiste anzeigen soll.
Das ionContent Komponente ist ein nützlicher Inhalts-Wrapper, der sicherstellen kann, dass der Inhaltsbereich an den verfügbaren Bildschirmbereich angepasst wird. Außerdem wird das Scrollen erleichtert und andere, weniger häufig verwendete Verhaltensweisen können sichtbar gemacht werden. Wenn diese Ansicht geladen ist, wird der Titel der Navigationsleiste als "Lokale Parks" angezeigt..
Jetzt müssen wir sicherstellen, dass die App das Skript durch Hinzufügen lädt, um es auszuführen places.js zu index.html wie du unten siehst Ich empfehle, dies direkt vor dem Etikett.
Sie können die App anzeigen, aber die Ansicht wird immer noch nicht angezeigt. Um die Ansicht anzuzeigen, navigieren Sie zu http: // localhost: 8100 / # / places. Die in der Zustandsdefinition zugeordnete URL kann verwendet werden, um zu einer Route zu navigieren. Es sollte dann wie im folgenden Bild mit dem Titel "Local Parks" angezeigt werden..
Das ist noch nicht so aufregend, aber dies ist die grundlegendste Ansicht, die Sie wahrscheinlich die meiste Zeit einrichten werden. Lassen Sie uns nun Daten laden und auf dem Bildschirm anzeigen.
Bevor wir viel anderes tun können, müssen wir einige Daten laden. Dazu müssen wir einen Angular-Dienst hinzufügen, der uns bei der Verwaltung der Geolokalisierung unterstützt. In einem zukünftigen Lernprogramm wird der Standort eines Benutzers vom Gerät erkannt. Bis dahin werden wir es manuell in Chicago einstellen, eine meiner Lieblingsstädte.
Öffnen www / js / app.js und fügen Sie den folgenden Dienst am Ende der Datei hinzu. Es sollte sich mit den vorhandenen Methoden aus ketten Winkelmodul.
.factory ('Geolocation', function () return "formatierte Adresse": "Chicago, IL, USA", "Geometrie": "location": "lat": 41.8781136, "lng": -87.6297982, " place_id ":" ChIJ7cv00DwsDogRAMDACa2m4K8 ";)Dies ist ein Angular-Dienst, der ein Objekt zurückgibt, das dem entspricht, was das Google Maps-API für Chicago zurückgibt. Wir haben jetzt Angaben zum Standort, sodass wir dort Parks laden können.
Als Nächstes aktualisieren wir den Controller, um die Liste von der API zu laden. Zur Vereinfachung lade ich die Daten mit der $ http Service in der Steuerung. Die beste Vorgehensweise wäre, dies in einen Dienst zu abstrahieren. Öffnen www / views / places / places.js erneut und aktualisieren Sie den Controller wie folgt:
.Controller ('PlacesController', Funktion ($ http, Geolocation) var vm = this; var base = 'https://civinfo-apis.herokuapp.com/civic/places?type=park&location=' + Geolocation.geometry.location .lat + ',' + Geolocation.geometry.location.lng; vm.places = []; vm.load = Funktion load () $ http.get (base) .then (Funktion handleResponse (response) vm.places = Antwortdaten.Ergebnisse;);; vm.load (););Der Controller hat eine vm.load () Methode zum Ausführen der HTTP-Anforderung und speichert die Ergebnisse in vm.places. Wenn Sie dies speichern, wird die HTTP-Anforderung in den Entwicklerwerkzeugen Ihres Browsers angezeigt. Auch wenn Sie mit Angular vertraut sind, erkennen Sie möglicherweise nicht genau diesen Ansatz zum Speichern von Daten auf dem vm Variable. Ich empfehle, John Papas Post zu lesen, warum dies ein empfohlener Ansatz ist, wenn Sie etwas Klarheit brauchen.
Um die Daten anzuzeigen, müssen wir auch die Vorlage aktualisieren und die Liste der Parks durchlaufen, um sie anzuzeigen. Öffnen www / views / places / places.html und aktualisieren Sie es wie unten gezeigt.
![]()
Ortsname
place.formatted_address
In der Vorlage verwenden wir die ionList und ionItem Komponenten. Das ionList Komponente ist eine der nützlichsten Komponenten, da Listen aufgrund der kleineren Bildschirme und der typischen Verwendung im Hochformat eine sehr häufige Konstruktionswahl im mobilen Bereich sind. Ähnlich wie eine Liste mit ul und li, ionList Wickelt eine beliebige Anzahl von ionItem Elemente.
Listen können verschiedene Erscheinungsbilder annehmen. In diesem Beispiel zeigt das Listenelement ein Bild auf der linken Seite, indem Sie das Symbol angeben Artikel-Avatar Klasse auf der ionItem. Der gleiche Ansatz kann in einer Messaging-App verwendet werden, in der Sie eine Liste von Chats mit einem Avatar jeder Person haben.
In der ionItem, Sie zeigen den Namen und die Adresse an. Standardmäßig wird der Text automatisch mit CSS abgeschnitten, der überläuft, um Elemente auf derselben Höhe zu halten.
Wir haben eine Liste von Parks geladen und diese als Liste mit angezeigt ionList und ionItem. Wir können noch einen Schritt weitergehen und einen unendlichen Bildlauf hinzufügen, um zusätzliche Ergebnisse zu laden, wenn der Benutzer sich am Ende der Liste befindet (sofern verfügbar)..
Um zu veranlassen, dass die Liste automatisch zusätzliche Elemente auf der Grundlage des Blätterns des Benutzers nach unten lädt, können wir das verwenden ionInfiniteScroll Komponente. Diese Komponente wird am Ende einer Liste platziert. Sie überwacht, wann der Benutzer bis zum Ende geblättert hat, und ruft eine Methode auf, mit der weitere Elemente geladen werden können. Es hat auch einen eingebauten Ladeschleuder, um anzuzeigen, dass mehr Gegenstände geladen werden. Der Spinner wird ausgeblendet, wenn die Antwort vergeht.
Unsere API muss auch irgendeine Form der Paginierung unterstützen, damit dies funktioniert. In diesem Fall stellt das Google Maps-API ein Token bereit, das übergeben werden muss, um die nächsten Ergebnisse zu laden. Wir müssen den Controller aktualisieren, um diese Logik zu verwalten. Beginnen wir mit dem Update www / views / places / places.js Wie nachfolgend dargestellt.
.Controller ('PlacesController', Funktion ($ http, $ scope, 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 = []; vm.load = Funktion load () var url = base; if (token) url + = '& token =' + token; $ http.get (url) .then (Funktion 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');;);;Wir haben eine neue Eigenschaft hinzugefügt, vm.canLoad, Dies ist ein boolescher Wert, der angibt, ob zusätzliche Elemente zum Laden vorhanden sind. Das ist wahr standardmäßig. Bis zur Rückgabe einer Anfrage wissen wir nicht, ob weitere Artikel verfügbar sind.
Das vm.load () Die Methode wird aktualisiert, um das Token anzuhängen, falls verfügbar. Der Antworthandler verkettet nun die Ergebnisse im Array. Dies bedeutet, dass die zweite Ergebnisseite nach der ersten Seite hinzugefügt wird. Das Google Maps-API gibt eine zurück next_page_token Es können jederzeit weitere Ergebnisse geladen werden. Wenn diese Eigenschaft fehlt, können wir davon ausgehen, dass keine weiteren Elemente zum Laden von und vorhanden sind vm.canLoad ist eingestellt auf falsch. Die unendliche Bildlaufkomponente verwendet diesen Wert, um festzulegen, wann das Laden weiterer Elemente beendet wird.
Die letzte Änderung ist der Zusatz von $ scope. $ broadcast ('scroll.infiniteScrollComplete'). Die Endlos-Scroll-Komponente hat keine Kenntnis darüber, wann die HTTP-Anforderung abgeschlossen wurde oder wann genau sie gespeichert wurde, um das Ladesymbol zu deaktivieren. Daher wartet die Komponente auf Ereignisse, die sich selbst aktualisieren. In diesem Fall ist die scroll.infiniteScrollComplete event weist die Komponente an, den Spinner anzuhalten und weiter nach dem Benutzer zu suchen, der nach unten scrollen soll.
Das letzte Stück soll dies in der Vorlage aktivieren. Öffnen www / views / places / places.html und füge die Zeile zwischen dem Ende von ein ionList und ionContent Komponenten.
Die unendliche Bildlaufkomponente ist jetzt in Ihrer Vorlage aktiviert. Es beginnt zu beobachten, wann die Komponente sichtbar ist, was auch beim Laden ausgelöst wird, da dann keine Stellen sichtbar sind und die unendliche Bildlaufkomponente sichtbar ist. Es ruft die in deklarierte Methode auf auf unendlich einmal, wenn es sichtbar wird (hier ist es vm.load ()) und wartet, bis das Scroll-Scroll-Ereignis ausgelöst wurde.
Das ngIf wird verwendet, um den unendlichen Bildlauf zu deaktivieren, sobald die API alle möglichen Ergebnisse zurückgegeben hat. In diesem Fall löst das Scrollen nach unten nicht mehr mehr Ressourcen aus.
Bei der Verwendung der Endlos-Bildlaufleiste ist es wichtig, eine ngIf um es zu deaktivieren. Es kann leicht sein, die Komponente so zu implementieren, dass die Komponente versucht, zu laden und zu laden und niemals anzuhalten.
Damit ist die Ortsansicht abgeschlossen. Rückblickend gibt es eine ganze Reihe von Funktionen, die durch 12 HTML-Zeilen in der Vorlage und ca. 20 JavaScript-Zeilen im Controller aktiviert werden.
Wir haben uns eine Reihe von Komponenten angesehen, die Sie häufig in Ihren Ionic-Apps verwenden werden.
ionNavView und ionNavBar koordinierte Navigation mit verschiedenen Ansichten unterstützen.ionList und ionItem Komponenten machen es einfach, mobile Listen zu erstellen.ionInfiniteScroll Die Komponente löst automatisch einen Anruf aus, um weitere Elemente zu laden und an die Liste anzufügen.Im nächsten Lernprogramm werden einige nützliche Dienste von Ionic wie Ladekennzeichen und Popovers beleuchtet.
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.
