{"id":278,"date":"2015-01-28T02:00:00","date_gmt":"2015-01-28T02:00:00","guid":{"rendered":"http:\/\/localhost\/?p=278"},"modified":"2017-01-09T06:56:25","modified_gmt":"2017-01-09T06:56:25","slug":"pull-to-refresh-directive","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/pull-to-refresh-directive","title":{"rendered":"Understanding Pull to Refresh"},"content":{"rendered":"

This is a guest post by Andrew McGivery, an application developer with a strong background in
\nAndroid, AngularJS, Ionic, C#, SQL, and front end development. Andrew writes often about Ionic and how to build great
\nhybrid apps. Read more on Andrew’s personal blog<\/a><\/em><\/p>\n

With the rise of social networks, the “feed” has become a popular design pattern, especially in mobile apps. The idea is to load in new items to the top of a feed by pulling down from the top of the list until you see a loading indicator, letting go, and watching as new items magically (not really) add themselves in.<\/p>\n

Ionic has an awesome directive that has undergone a redo fairly recently to accomplish exactly this. In this post, we’ll break down a basic example of using this directive, a list, and the Random User API<\/a> to see how to use the directive with example data (feel free to follow along on CodePen<\/a>).<\/p>\n

<\/p>\n

ionRefresher (Pull to Refresh Directive)<\/h3>\n

The Ionic directive we are going to use is the ion-refresher<\/code> (Official Documentation<\/a>). The most basic usage is as follows:<\/p>\n

<ion-refresher on-refresh="doRefresh()"><\/ion-refresher>\n<\/code><\/pre>\n
on-refresh<\/code> should point to a $scope<\/code> function that gets the new data, updates a list, and then lets the refresher know it is done. This refresher should be above some kind of list. <\/p>\n
View<\/h3>\n
For our example, we’ll be using the following view markup:<\/p>\n
<ion-refresher on-refresh="doRefresh()"><\/ion-refresher>\n<ion-list>\n  <ion-item class="item-avatar" ng-repeat="item in items">\n    <img src="{{item.user.picture.thumbnail}} " \/>\n    ## {{item.user.name.first}} {{item.user.name.last}}\n    <p>{{item.user.location.city}} {{item.user.password}}<\/p>\n  <\/ion-item>\n<\/ion-list>\n<\/code><\/pre>\n
which looks something like this, once rendered:<\/p>\n
\"rendered
Remember that this list iterates over the $scope.items<\/code> array.<\/p>\n
ng-repeat="item in items"\n<\/code><\/pre>\n
Factory<\/h3>\n
In our example, we’re going to be making a call to the Random User API to get some data to play with. To do this, we’ll create a factory that makes these API calls. This factory will have two methods: GetFeed<\/code> and GetNewUser<\/code>. GetFeed<\/code> will be called when our app loads to get the initial data, and the GetNewUser<\/code> will be called each time we do a pull to refresh.<\/p>\n
.factory('PersonService', function($http){\n  var BASE_URL = "http:\/\/api.randomuser.me\/";\n  var items = [];\n\n  return {\n    GetFeed: function(){\n      return $http.get(BASE_URL+'?results=10').then(function(response){\n        items = response.data.results;\n        return items;\n      });\n    },\n    GetNewUser: function(){\n      return $http.get(BASE_URL).then(function(response){\n        items = response.data.results;\n        return items;\n      });\n    }\n  }\n})\n<\/code><\/pre>\n
Our GetFeed<\/code> call returns 10 results, and each call to GetNewUser<\/code> returns 1 result.<\/p>\n
Controller<\/h3>\n
Our controller needs to do 2 things:<\/p>\n
    \n
  1. Fill the feed with the initial items<\/li>\n
  2. Handle the pull to refresh<\/li>\n<\/ol>\n
    First, to fill our feed, we’ll want to make a call to the PersonService and assign the result to the $scope.items<\/code> array:<\/p>\n
    .controller('MyCtrl', function($scope, $timeout, PersonService) {\n  $scope.items = [];\n\n  PersonService.GetFeed().then(function(items){\n    $scope.items = items;\n  });\n});\n<\/code><\/pre>\n
    Next, we need to handle the pull to refresh. Recall we configured our directive to call a doRefresh<\/code> function. We’ll need to define this function:<\/p>\n
    $scope.doRefresh = function() {\n\n}\n<\/code><\/pre>\n
    In this function, we should call the GetNewUser<\/code> function and add these items to the beginning of the array.<\/p>\n
    $scope.doRefresh = function() {\n  PersonService.GetNewUser().then(function(items){\n    $scope.items = items.concat($scope.items);\n  });\n};\n<\/code><\/pre>\n
    You’ll notice we are using the array.concat<\/code> function to add the items in. This is because items<\/code> is an array, so we need to add the two arrays together.<\/p>\n
    We still need to do one final thing. We need to let the scroller know that we’re done loading in the new items, so it can hide the loading indicator. To do this, we need to broadcast the scroll.refreshComplete<\/code> event.<\/p>\n
    $scope.doRefresh = function() {\n  PersonService.GetNewUser().then(function(items){\n    $scope.items = items.concat($scope.items);\n\n    \/\/Stop the ion-refresher from spinning\n    $scope.$broadcast('scroll.refreshComplete');\n  });\n};\n<\/code><\/pre>\n
    In its entirety, our controller looks like this:<\/p>\n
    .controller('MyCtrl', function($scope, $timeout, PersonService) {\n  $scope.items = [];\n\n  PersonService.GetFeed().then(function(items){\n    $scope.items = items;\n  });\n\n  $scope.doRefresh = function() {\n    PersonService.GetNewUser().then(function(items){\n      $scope.items = items.concat($scope.items);\n\n      \/\/Stop the ion-refresher from spinning\n      $scope.$broadcast('scroll.refreshComplete');\n    });\n  };\n\n});\n<\/code><\/pre>\n
    Conclusion<\/h3>\n
    Using the code above (full code on CodePen<\/a>), you can accomplish this common pull to refresh patten in your Ionic Apps. Questions? Feel free to comment below!<\/p>\n","protected":false},"excerpt":{"rendered":"
    This is a guest post by Andrew McGivery, an application developer with a strong background in Android, AngularJS, Ionic, C#, SQL, and front end development. Andrew writes often about Ionic and how to build great hybrid apps. Read more on Andrew’s personal blog With the rise of social networks, the “feed” has become a popular […]<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[3],"class_list":["post-278","post","type-post","status-publish","format-standard","hentry","category-all","tag-ionic"],"acf":[],"yoast_head":"\nUnderstanding Pull to Refresh - Ionic Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/pull-to-refresh-directive\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Understanding Pull to Refresh\" \/>\n<meta property=\"og:description\" content=\"This is a guest post by Andrew McGivery, an application developer with a strong background in Android, AngularJS, Ionic, C#, SQL, and front end development. Andrew writes often about Ionic and how to build great hybrid apps. Read more on Andrew’s personal blog With the rise of social networks, the “feed” has become a popular […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/pull-to-refresh-directive\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2015-01-28T02:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-01-09T06:56:25+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/mcgivery.com\/wp-content\/uploads\/2015\/01\/list.png\" \/>\n<meta name=\"author\" content=\"Andrew McGivery\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@andrewmcgivery\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andrew McGivery\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/pull-to-refresh-directive#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/pull-to-refresh-directive\"},\"author\":{\"name\":\"Andrew McGivery\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/f919a9d571424a39c0ec8ce6d44755e7\"},\"headline\":\"Understanding Pull to Refresh\",\"datePublished\":\"2015-01-28T02:00:00+00:00\",\"dateModified\":\"2017-01-09T06:56:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/pull-to-refresh-directive\"},\"wordCount\":511,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/pull-to-refresh-directive#primaryimage\"},\"thumbnailUrl\":\"http:\/\/mcgivery.com\/wp-content\/uploads\/2015\/01\/list.png\",\"keywords\":[\"Ionic\"],\"articleSection\":[\"All\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/pull-to-refresh-directive\",\"url\":\"https:\/\/ionic.io\/blog\/pull-to-refresh-directive\",\"name\":\"Understanding Pull to Refresh - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/pull-to-refresh-directive#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/pull-to-refresh-directive#primaryimage\"},\"thumbnailUrl\":\"http:\/\/mcgivery.com\/wp-content\/uploads\/2015\/01\/list.png\",\"datePublished\":\"2015-01-28T02:00:00+00:00\",\"dateModified\":\"2017-01-09T06:56:25+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/pull-to-refresh-directive#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/pull-to-refresh-directive\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/pull-to-refresh-directive#primaryimage\",\"url\":\"http:\/\/mcgivery.com\/wp-content\/uploads\/2015\/01\/list.png\",\"contentUrl\":\"http:\/\/mcgivery.com\/wp-content\/uploads\/2015\/01\/list.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/pull-to-refresh-directive#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Understanding Pull to Refresh\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/f919a9d571424a39c0ec8ce6d44755e7\",\"name\":\"Andrew McGivery\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/30cc07af4f34ecef53282a28baa6b213feb275e5abbd28b62d197851aff4ca7e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/30cc07af4f34ecef53282a28baa6b213feb275e5abbd28b62d197851aff4ca7e?s=96&d=mm&r=g\",\"caption\":\"Andrew McGivery\"},\"description\":\"My name is Andrew McGivery. I currently work full time as an application developer at Manulife Financial in Canada.\",\"sameAs\":[\"http:\/\/www.mcgivery.com\/\",\"https:\/\/x.com\/andrewmcgivery\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/andrewmcgivery\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Understanding Pull to Refresh - Ionic Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/pull-to-refresh-directive","og_locale":"en_US","og_type":"article","og_title":"Understanding Pull to Refresh","og_description":"This is a guest post by Andrew McGivery, an application developer with a strong background in Android, AngularJS, Ionic, C#, SQL, and front end development. Andrew writes often about Ionic and how to build great hybrid apps. Read more on Andrew’s personal blog With the rise of social networks, the “feed” has become a popular […]","og_url":"https:\/\/ionic.io\/blog\/pull-to-refresh-directive","og_site_name":"Ionic Blog","article_published_time":"2015-01-28T02:00:00+00:00","article_modified_time":"2017-01-09T06:56:25+00:00","og_image":[{"url":"http:\/\/mcgivery.com\/wp-content\/uploads\/2015\/01\/list.png"}],"author":"Andrew McGivery","twitter_card":"summary_large_image","twitter_creator":"@andrewmcgivery","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Andrew McGivery","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/pull-to-refresh-directive#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/pull-to-refresh-directive"},"author":{"name":"Andrew McGivery","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/f919a9d571424a39c0ec8ce6d44755e7"},"headline":"Understanding Pull to Refresh","datePublished":"2015-01-28T02:00:00+00:00","dateModified":"2017-01-09T06:56:25+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/pull-to-refresh-directive"},"wordCount":511,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/pull-to-refresh-directive#primaryimage"},"thumbnailUrl":"http:\/\/mcgivery.com\/wp-content\/uploads\/2015\/01\/list.png","keywords":["Ionic"],"articleSection":["All"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/pull-to-refresh-directive","url":"https:\/\/ionic.io\/blog\/pull-to-refresh-directive","name":"Understanding Pull to Refresh - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/pull-to-refresh-directive#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/pull-to-refresh-directive#primaryimage"},"thumbnailUrl":"http:\/\/mcgivery.com\/wp-content\/uploads\/2015\/01\/list.png","datePublished":"2015-01-28T02:00:00+00:00","dateModified":"2017-01-09T06:56:25+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/pull-to-refresh-directive#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/pull-to-refresh-directive"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/pull-to-refresh-directive#primaryimage","url":"http:\/\/mcgivery.com\/wp-content\/uploads\/2015\/01\/list.png","contentUrl":"http:\/\/mcgivery.com\/wp-content\/uploads\/2015\/01\/list.png"},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/pull-to-refresh-directive#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Understanding Pull to Refresh"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/f919a9d571424a39c0ec8ce6d44755e7","name":"Andrew McGivery","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/30cc07af4f34ecef53282a28baa6b213feb275e5abbd28b62d197851aff4ca7e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/30cc07af4f34ecef53282a28baa6b213feb275e5abbd28b62d197851aff4ca7e?s=96&d=mm&r=g","caption":"Andrew McGivery"},"description":"My name is Andrew McGivery. I currently work full time as an application developer at Manulife Financial in Canada.","sameAs":["http:\/\/www.mcgivery.com\/","https:\/\/x.com\/andrewmcgivery"],"url":"https:\/\/ionic.io\/blog\/author\/andrewmcgivery"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/278","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=278"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/278\/revisions"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=278"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=278"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}