Wir benutzen Cookies, um die Nutzerfreundlichkeit der Website zu verbessern. Durch deinen Besuch stimmst du der Datenschutzerklärung zu.
Alles klar!
BASIC thinking Logo Dark Mode BASIC thinking Logo Dark Mode
  • TECH
    • Apple
    • Android
    • ChatGPT
    • Künstliche Intelligenz
    • Meta
    • Microsoft
    • Quantencomputer
    • Smart Home
    • Software
  • GREEN
    • Elektromobilität
    • Energiewende
    • Erneuerbare Energie
    • Forschung
    • Klima
    • Solarenergie
    • Wasserstoff
    • Windkraft
  • SOCIAL
    • Facebook
    • Instagram
    • TikTok
    • WhatsApp
    • X (Twitter)
  • MONEY
    • Aktien
    • Arbeit
    • Die Höhle der Löwen
    • Finanzen
    • Start-ups
    • Unternehmen
    • Marketing
    • Verbraucherschutz
Newsletter
Font ResizerAa
BASIC thinkingBASIC thinking
Suche
  • TECH
  • GREEN
  • SOCIAL
  • MONEY
  • ENTERTAIN
  • NEWSLETTER
Folge uns:
© 2003 - 2025 BASIC thinking GmbH
TECH

BASIC App [80%]: Heute im Fokus: Routing mit Ionic sowie die Beitragsdetailseite

Dennis Hüggenberg
Aktualisiert: 30. Dezember 2016
von Dennis Hüggenberg
Teilen

Du betreibst einen eigenen Blog mit WordPress, hast Erfahrung mit HTML5, CSS und JavaScript und wolltest eigentlich schon immer eine eigene App für deinen Blog entwickeln? Dann ist diese Kolumne genau das Richtige für dich. Heute beschäftigen wir uns mit dem Routing in Ionic sowie mit der Beitragsdetailseite. Mit der Entwicklung der BASIC App stehen wir bei 80 Prozent. // von Dennis Hüggenberg

In der letzten Woche haben wir den Helden ng-repeat kennen gelernt. Diese Direktive schafft es mit nur wenigen Code-Zeilen eine Collection aus JavaScript-Objekten mühelos darzustellen. Heute kümmern wir uns darum, wie wir von der erstellten Blog-Post-Übersichtsseite in einen Beitrag navigieren. Ebenfalls wollen wir bereits erste Teile eines einzelnen Beitrages anzeigen.

Das richtige Routing definieren

Damit die Navigation von der Übersichtsseite auf eine Detailseite gelingt muss dafür das sogenannte Routing in Ionic implementiert werden. Ein Blick auf die Projektstruktur verrät, wo wir hin greifen müssen um das entsprechende Routing zu implementieren.

UPDATE: Das Tech-Briefing

Du willst nicht abgehängt werden, wenn es um KI, Green Tech und die Tech-Themen von Morgen geht? Über 10.000 Vordenker bekommen jeden Tag die wichtigsten News direkt in die Inbox und sichern sich ihren Vorsprung.

Nur für kurze Zeit: Anmelden und mit etwas Glück Apple AirPods 4 gewinnen!

Mit deiner Anmeldung bestätigst du unsere Datenschutzerklärung. Beim Gewinnspiel gelten die AGB.

  • 5 Minuten pro Tag
  • 100% kostenlos
  • Exklusive PDF-Guides

basic_app_routing_ionic_00

(Danke an der richtigen Stelle: Vielen Dank an Leser Mumenthaler für den Hinweis bezüglich der korrekten Einbindung von externen Bibliotheken. Ich habe das Verzeichnis upgedatet.)

Das Routing wird in der routes.js implementiert. Wie das genau funktioniert, werden wir uns noch im Laufe dieses Beitrages ansehen. Weiterhin wichtig für das Routing sind unsere beiden Template-Dateien posts.html sowie post.html.

Um richtig von der Startseite auf die Beitragsdetailseite zu navigieren, bedarf es in diesem Fall zweier Zustände. Unsere Zustände werden immer durch einen Namen, einen URL-Parameter, eine Template-URL und durch einen zuständigen Controller ausgezeichnet. Der URL-Parameter wird später an die Ursprungs-URL dran gehängt. Mit der Template-URL kann die Vorlage definiert werden, welche bei dem jeweiligen Zustand zum Tragen kommen soll.  Letztendlich wird mit  $urlRouterProvider.otherwise(‚/posts‘); noch ein Fallback-Zustand definiert der zum Einsatz kommt, wenn keiner definierten Zustände auf die aktuelle Situation zutrifft.

basic_app_routing_ionic_01

In unserem Template posts.html übergben wir nun die Ziel-URL enstprechend unserem definierten Zustand. Arbeitet man aktuell lokal und verwendet den localhost als Server und es wird beispielhaft auf den Post mit der ID 123456 zugegriffen, dann würde folgende URL im Browser stehen: http://localhost:8100/#/post/123456

basic_app_routing_ionic_02

Die Beitragsdetailseite

Aktuell funktioniert unser oben skizzierter Code noch nicht. Wir haben explizit angegeben, dass wir als URL-Parameter die ID des jeweiligen Posts übergeben wollen. Diese müssen wir erst noch ermitteln. Dazu habe ich eine variable postList definiert, in welche alle per Schnittstelle geladenen Blogbeiträge gespeichert werden. Weiterhin habe ich eine Funktion getPost geschrieben, welche eine postId entgegen nimmt und diese mit allen Beiträgen aus der Variablen postList vergleicht und als Ergebnis den Blogbeitrag zurückliefert, welcher die gleiche ID aufweist, wie die, die übergeben wurde.

basic_app_routing_ionic_03

Verwendung findet die Methode im oben bereits erwähnten Controller postCtrl:

basic_app_routing_ionic_04

Mit diesen Anpassungen können wir in unserem Template post.html auf die Daten des ausgewählten Beitragen zugreifen. Die letztendliche Implementierung in der Template-Datei entspricht der auf der Startseite.

Wie geht es weiter?

Von der langen Liste der offenen Punkte können wir mit diesem Update die Beitragsdetailseite streichen:

  • Pull to Refresh
  • Infinity-Scrolling
  • Einbindung eines Frameworks für die Aufbereitung von Responsive-Images
  • Beitragsdetailseite
  • Navigation durch die Beiträge mit Wischen nach rechts bzw. links
  • Darstellung der Kommentare sowie der Likes
  • Push-Notifications
  • Design-Optimierungen
  • Neu: Content als korrekten HTML-Inhalt darstellen

Den aktuellen Stand des Prototyps kannst du unter basicapp.de ausprobieren, für die BETA-Version kannst du dich hier anmelden.

Für die kommende Woche werde ich mir wieder spannende Themen aus der obigen Liste heraussuchen und diese umsetzen und dir das Ergebnis dokumentiert zur Verfügung stellen. Bis dahin:Genieße die Adventszeit, hinterlasse einen Kommentar oder diskutiere mit mir auf Twitter (@hueggenberg).

Kleines Kraftwerk

Anzeige

STELLENANZEIGEN
Praktikant*in Digital Transformation Supply C...
Mercedes-Benz AG in Böblingen
Social Media Manager (d/m/w) für die Presse- ...
Stadt Celle in Celle
Referent/-in (m/w/d) Digitales, Technologietr...
HESSENMETALL - Verband der Metall... in Frankfurt am...
Marketing Manager mit Online-Kompetenz (m/w/d)
sieger design GmbH & Co. KG in Sassenberg bei Münster
Social Media Content Creator (m/w/d)
Erlebnispark Tripsdrill GmbH & Co... in Cleebronn/Tr...
Head of Digital Marketing – Busch Group (m/w/d)
Busch Vacuum Solutions in Maulburg bei Lörrach

Du willst solche Themen nicht verpassen? Mit dem BASIC thinking UPDATE, deinem täglichen Tech-Briefing, starten über 10.000 Leser jeden Morgen bestens informiert in den Tag. Jetzt kostenlos anmelden:

Mit deiner Anmeldung bestätigst du unsere Datenschutzerklärung

THEMEN:Apps
Teile diesen Artikel
Facebook Flipboard Whatsapp Whatsapp LinkedIn Threads Bluesky Email
vonDennis Hüggenberg
Folgen:
Dennis Hüggenberg ist Projektleiter und Hobby-Entwickler. Kleine, raffinierte, mit schicken Oberflächen versehenen Applikationen faszinieren ihn. Freunde & Familie bilden das Zentrum seines Offline-Daseins.
Kleines Kraftwerk

Anzeige

EMPFEHLUNG
Online-Speicher Internxt
Einmal zahlen, ein Leben lang Online-Speicher erhalten
Anzeige TECH
UPDATE: DAS TECH-BRIEFING

Jeden Tag bekommen 10.000+ Vordenker von uns die wichtigsten Tech-News direkt in die Inbox. Abonniere jetzt dein kostenloses Tech-Briefing:

Mit deiner Anmeldung bestätigst du unsere Datenschutzerklärung

LESEEMPFEHLUNGEN

iPhone 16 verschiedene Farben Preis Vergleich
MONEYTECH

iPhone-Preis: In diesen Ländern ist das iPhone am teuersten

Effizientere Elektromotoren
TECH

Forscher entschlüsseln Energieverlust von Elektroautos

Wasserstoff Verkehr Autoindustrie Stellantis
Break the NewsTECH

Aus der Traum: Der große Wasserstoff-Irrtum der Autoindustrie

ChatGPT Passwort ändern wo wie
TECH

ChatGPT: Passwort ändern – so geht’s

beglaubigte Übersetzung-2
AnzeigeTECH

Digitalisierung traditioneller Dienstleistungen: Wie sich die beglaubigte Übersetzung verändert

Meta Mark Zuckerberg KI Strategie Rechenzentren
Break the NewsTECH

KI-Strategie von Meta: Mark Zuckerberg packt die Brechstange aus

Mehr anzeigen
Folge uns:
© 2003 - 2025 BASIC thinking GmbH
  • Über uns
  • Mediadaten
  • Impressum
  • Datenschutz
Welcome Back!

Sign in to your account

Username or Email Address
Password

Lost your password?