How to implement pull to refresh

ionic-v1
1

I’m trying to implement on pull to refresh on the sample tabs app. The only thing I changed is to pull data from remote JSON. See the services.js here:

angular.module('starter.services', [])

/**
 * A simple example service that returns some data.
 * http://10.10.1.1/index.php/example/friends
 */
 
.factory('Friends', function($http) {
  var friends = [];

  $http.get('http://10.10.1.1/index.php/example/friends')
    .success(function(data, status, headers,config){
      console.log('data success');
      console.log(data); // object seems fine
    })
    .error(function(data, status, headers,config){
      console.log('data error');
    })
    .then(function(result){
      friends = result.data;
    });



  return {
    all: function() {
        console.log('return');
        console.log(friends);
      return friends;
    },
    get: function(friendId) {
      // Simple index lookup
      return friends[friendId];
    }
  }
});

I have read the http://ionicframework.com/docs/api/directive/ionRefresher/ and now I just don’t get where exactly and how I should put all.

Thanks!

2

Best bet is to check the codepens, they have a pretty detailed example of pull-to-refresh.

3

@mhartington yes but unlike that example we have templates, controllers and services. For a beginner like myself it’s kinda confusing to understand where to take those examples and glue all together in a working sample app.

4

Here is a more “advanced” demo that has a factory for returning airline data. So, you can see infinite scroll. It does NOT do PTR, but you can get the gist of it.

However, the reality is that all CodePen’s are limited in their nature. You can’t see a good directory structure, etc. You need to take the best practices from experience and others in the AngularJS community to figure out what works best for you.

Here is a link to a shallow article I wrote on it for my use : http://calendee.com/angularjs-code-organization/

Here’s a very in-depth best practices guide : http://grumpywizards.com/Angular/

1 Like