Add Pull to Refresh with Toast Message in Your Ionic App

by - July 05, 2015

Today I will show you how to add the pull to refresh feature in your Ionic app. This little add-on is very well know from all kinds of apps which need to refresh some content in a modern way. Furthermore we will include a toast message which will be displayed when the refreshing has finished.
The ‘I pull and something happens’ behavior is very popular to Android and iOS users, so your app should not miss it if you need to update any content on user action!
Setup a base app
We start with a blank app and install ngCordova via bower, the needed cordova plugin for a toast message and add a platform to test the functions. ngCordova or Cordova can’t be used in the browser with ‘ionic serve’, so make sure to add a platform!
1
2
3
4
5
6
7
ionic start devdactic-refresher blank
cd devdactic-refresher
bower install --save ngCordova
cordova plugin add https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin.git
ionic platform add ios
ionic prepare ios
ionic build ios

This tutorial uses ngCordova 0.1.10-alpha and Ionic 1.0.0-beta.14

To make use of ngCordova, we need to include this in our index.html BEFORE the cordova.js!
1
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
Finally, our app should load the ngCordova module so inject it properly:
1
angular.module('starter', ['ionic', 'ngCordova'])
Adding the Refresher
To add a pull to refresh, we can use a custom ionic directive which will make our life unbelievable easy. Therefore, go to your index.html and replace everything inside the body with:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<body ng-app="starter">
   <ion-pane>
     <ion-header-bar class="bar-positive">
       <h1 class="title">Devdactic Simple List</h1>
     </ion-header-bar>
      
     <ion-content ng-controller="AppCtrl">
         <ion-list>
         <ion-refresher pulling-text="Pull to refresh"
         refreshing-text="Loading..."
         refreshing-icon="ion-loading-c"
         pulling-icon="ion-ios7-arrow-thin-down"
         on-refresh="doRefresh()">
         </ion-refresher>
 
         <ion-item ng-repeat="item in items">
            {{item}}
         </ion-item>
     </ion-list>
      
     </ion-content>
   </ion-pane>
 </body>
Here we have a simple list with some items, and inside the list we are adding our ion-refresher. There are some attributes you can specify on the refresher, so for a full guide check out the ionic official documentation.
For this tutorial, we just set the displayed text while pulling and while refreshing, and the icon before and while loading. The important part you always need is the on-refresh attribute, which calls the function inside your controller. Now open the app.js and add the controller we already assigned to our content:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.controller('AppCtrl', function($scope, $cordovaToast) {
    $scope.items = ['First item', 'Second item', 'Third item'];
 
    $scope.doRefresh = function() {
        $scope.items.push('More items ' + Math.random());
        $scope.$broadcast('scroll.refreshComplete');
 
        $cordovaToast.showLongBottom('This could be your text!')
        .then(function(success) {
            // Do something on success
        }, function(error) {
            // Handle error
        });
    }
});
Well, nothing special in here. First of all, we included the $cordovaToast wrapper from ngCordova to show a small textbox after refreshing. We declare our scope array for the ng-repeat list, and create the doRefresh() function which will be called when the user pulls the refresher view down. In our case, we just add a random element to our scope array. In most cases you will make some http call or other stuff in here, so the loading indicator will have a real right to exist.
The next line is the most important for the refresher: Here we broadcast the ‘scroll.refreshComplete’ event, which will make the refreshing view disappear. If you make any async calls or stuff like that, always make sure to call this event when your finished AND in some kind of finally block. A infinite loading indicator is the last thing you want to have in your app!
Additional we will show a little toast through $cordovaToast. We make it a long toast at the bottom of the screen with a short message. You can see all possibilities in thengCordova documentation. The result should look like this:


You May Also Like

0 comments