Neue und ältere Beiträge mit dem Ionic-Framework in deiner App laden

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 kümmern wir uns um das Laden von neuen bzw. von älteren Posts. Mit der Entwicklung der BASIC App stehen wir bei 85 Prozent. // von Dennis Hüggenberg

Im letzten Teil der Kolumne haben wir uns damit beschäftigt die Content-Elemente unserer Blogposts korrekt anzuzeigen. Heute möchte ich dir zeigen, wie du neue und ältere Beiträge laden kannst.

Warum ist das wichtig?

Navigiert man in einer News-App, dann sind für mich zwei Funktionen von elementarer Bedeutung: Das Laden von neuen sowie älteren Beiträgen. Endlich kehrt mit der Weihnachtszeit etwas Ruhe in den hektischen Alltag ein. Eine gute Gelegenheit, um seine News-Apps zu durchforsten. Endlich Zeit, alle Inhalte zu checken. Dabei ist es für mich wichtig, alle Inhalte bis zu meinem letzten Besuch hin lesen zu können. Auch das Gegenteil nicht zu vernachlässigen: Ich habe alle Beiträge gelesen und möchte prüfen, ob neue Beiträge verfügbar sind. In diesem Teil der Kolumne soll es um die Funktionen ion-refresher sowie ion-infinite-scroll gehen, welche uns genau dieses ermöglichen.

Mehr zum Thema

• Heute im Fokus: Routing mit Ionic sowie die Beitragsdetailseite
• Best-Practices – JSON und REST im Einsatz

Neue Beiträge laden

Um neue Beiträge laden zu können, stellt Ionic die Funktionalität ion-refresher zur Verfügung. Um dieses Feature in deiner App verwenden zu können, müssen folgende Schritte erledigt werden:

1. Du musst im Template, welches deine Posts auflistet, vor dem Beginn der Auflistung deiner Beiträge folgendes Markup einfügen:

   <ion-refresher
       on-refresh="doRefresh()">
   </ion-refresher>

2. Du musst in deinem Controller die Funktion doRefresh implementieren. In Abhängigkeit welches JSON-Plugin zu verwendest ist die Aufbereitung deiner Daten unterschiedlich. In der Dokumentation findest du ein sehr gutes Grundgerüst, welches du als Vorlage für deine eigene Implementierung verwenden kannst:

   $scope.doRefresh = function() {
     $http.get('DeineJsonUrl')
       .success(function(response) {
         // Deine Implementierung
       })
       .finally(function() {
         $scope.$broadcast('scroll.refreshComplete');
       });
   };

Ältere Beiträge laden

Das Gegenstück zum  ion-refresher ist ion-infinite-scroll. Diese Funktion ermöglicht es dir, ältere Beiträge deines Blogs in deiner App anzeigen zu lassen. Schauen wir uns an, welche Schritte notwendig sind, um diese Funktion zu implementieren:

1. Am Ende, also nach der Auflistung der Posts, muss folgender Code implementiert werden:

   <ion-infinite-scroll
     ng-if="moreDataCanBeLoaded()"
     on-infinite="loadMoreData()">
   </ion-infinite-scroll>

2. Du siehst, dass zur vollständigen Implementierung zwei Funktionen benötigt werden:
   moreDataCanBeLoaded sowie loadMore. Hier siehst du das Grundgerüst einer Beispiel-Implementierung, wie es in der Doku des Ionic-Frameworks zu finden ist:

   $scope.moreDataCanBeLoaded = function(){
     return true;
   };

   $scope.loadMore = function() {
       $http.get('/more-items').success(function(items) {
         useItems(items);
         $scope.$broadcast('scroll.infiniteScrollComplete');
       });
     };

Wie geht es weiter?

Zwei große Punkte haben wir damit von der ToDo-Liste streichen können. Offen Sind damit noch diese Punkte:

• 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
• Content als korrekten HTML-Inhalt darstellen

Die Entwicklung der App wird nach der Weihnachtszeit fortgeführt. Ich wünsche dir, deiner Familie und deinen Freunden fröhliche Festtage. Genieße die Zeit. Den aktuellen Stand der App kannst am Prototypen auf basicapp.de live verfolgen, hier kannst du dich für die Beta-Version eintragen. Ich freue mich über dein Feedback in den Kommentaren oder direkt auf Twitter (@hueggenberg).