Getting started with Ionic (Part 3: Showcasing Ionic capabilities)

On this post in this series, we will leverage the modularized starter application created in Part 2 to showcase some exciting Ionic framework capabilities: pull to refresh, infinite scrolling and swipe to delete.

Adding the Users module

First we'll start by adding a new users module. Ceate a users directory under the modules folder.

Then we introduce a users-service. This service will fetch random users from http://api.randomuser.me/

'use strict';

function UsersService($http, $q) {
 var BASE_URL = "http://api.randomuser.me/";
 var items = [];
 return {
  GetFeed: function(){
   return $http.get(BASE_URL+'?results=10').then(function(response){
    items = response.data.results;
    return items;
   });
  }

module.exports = ['$http', '$q', UsersService];

Then add a users-controllers.js file with one method to populate the scope items:

'use strict';

function UsersController($scope, $timeout, UsersService) { 
 $scope.items = [];

 UsersService.GetFeed().then(function(items){
  $scope.items = items;
 });
}
module.exports = ['$scope', '$timeout', 'UsersService', UsersController]; 

Next create the users.html file:

https://github.com/yortch/modularIonicDemo1/blob/c173297fa7688c742a9ce3b0ac7376b5799ea9f8/www/js/modules/users/users.html

You will then create a user-controller.js which will populate the detail for the selected user:

function UserController($scope, $stateParams, UsersService) {
  $scope.user = UsersService.GetUser($stateParams.userId);
}
module.exports = ['$scope', '$stateParams', 'UsersService', UserController];

And similarly create a user.html to show the user details:

https://github.com/yortch/modularIonicDemo1/blob/master/www/js/modules/users/user.html

Now you need to create the module js files which links the service and controllers.

'use strict';
module.exports = angular.module('users', [])
 .factory('UsersService', require('./users-service'))
 .controller('UsersController', require('./users-controller'))
 .controller('UserController', require('./user-controller'));

We also need to update the router.js to add the users list and user detail states. Optionally you can also make the new users url the default screen:

.state('app.users', {
  url: "/users",
  views: {
   'menuContent': {
    templateUrl: "js/modules/users/users.html",
    controller: 'UsersController'
   }
  }
})
.state('app.user', {
  url: "/users/:userId",
  views: {
   'menuContent': {
    templateUrl: "js/modules/users/user.html",
    controller: 'UserController'
   }
  }
})
;
$urlRouterProvider.otherwise('/app/users');

Finally we will add the new users module to the app.js and we are ready to go:

require('./modules/users/users');

module.exports = angular.module('starter', [
  'ionic',
  'menu',
  'login',
  'playlists',
  'users'
])

Run gulp then ionic emulate or ionic serve and you will now see the new screen:

Implementing pull to refresh

You can easily add pull to refresh functionality to any ion content directive. To demonstrate this we will add this capability to the Users list. We will simulate that a new user is added every time we refresh the list.

Let's start by first adding a newItems array and a GetNewUser function to the users-service.js:

var newItems = [];

//Used from pull to refresh (prepend new items)
GetNewUser: function(){
 return $http.get(BASE_URL).then(function(response){
  newItems = response.data.results; 
  items = newItems.concat(items);
  return newItems;
 });
},

Next we'll add a doRefresh method to users-controller.js:

//Use by pull to refresh
$scope.doRefresh = function() {
 UsersService.GetNewUser().then(function(items){
  $scope.items = items.concat($scope.items);
  //Stop the ion-refresher from spinning
  $scope.$broadcast('scroll.refreshComplete');
 });
};

Finally we need to add the ion-refresher directive on the users.html:

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

Run gulp and emulate to try this out:

Implementing infinite scrolling

A popular feature in mobile applications nowadays is infinite scrolling. Infinite scrolling provides a seamless pagination capability to the user by querying for the next batch of elements as the user scrolls to the bottom of the list.

We will demonstrate this capability in the Users list. Start by adding a GetNewUsers function to the users-service.js:

GetNewUsers: function(){
 return $http.get(BASE_URL+'?results=10').then(function(response){
  newItems = response.data.results;
  items = items.concat(newItems);
  return newItems;
 });
}

Next add a loadMore function to the users-controllers.js:

//Used for infinite scroll
$scope.loadMore = function() {
 UsersService.GetNewUsers().then(function(items){
  $scope.items = $scope.items.concat(items);
  $scope.$broadcast('scroll.infiniteScrollComplete');
 });
};

Finally we add the ion-infinite-scroll directive below the ion-list:

<ion-infinite-scroll on-infinite="loadMore()" distance="5%"></ion-infinite-scroll>

Implementing swipe to delete

Swiping on a row is a convenient way to provide quick access to functions to apply on the swiped item such as edit and delete capabilities. For demonstrations purposes we will add a swipe to delete capability to the Users list.

Start by adding a DeleteUser method to the users-service.js:

DeleteUser: function(index) {
 items.splice(index, 1);
 return items;
}

Then add a delete method to the users-controller.js:

$scope.delete = function(index) {
 var items = UsersService.DeleteUser(index);
 $scope.items = items;
};

Then update users.html to add the can-swipe attribute and an option button:

<ion-list can-swipe="true">

<ion-option-button class="button-assertive" ng-click="delete($index)">
Delete
</ion-option-button>

Try it out yourself!

To try this locally run the following setup commands:

git clone https://github.com/yortch/modularIonicDemo1
cd modularIonicDemo1
npm install
gulp
ionic emulate