• Home

Add an action overlay with ionicframework

When user interaction is blocked while loading data, computing stuff...you should display something, if not, the user will think the app is crashing or not responsive. Ionicframework provides the excellent $ionicloading service. You just need to instance the service, then to call it wherever you want. Let's see an example based on ltanews.

First you need to declare the service, do it in your controller via something like :

.controller('TweetsCtrl', function($scope, $http, $ionicLoading, $cordovaGoogleAnalytics, tweetService, Settings)

This controller is using data from the service called tweetService : we need to display the overlay, get data from the service, insert data in a handler, hide the overlay. Let's see.

Right after the controller definition I add :

$ionicLoading.show({
        content: 'Chargement',
        animation: 'fade-in',
        showBackdrop: true,
        maxWidth: 200,
        showDelay: 0
      });

 Then just after this overlay I call the service, if the call is successful I hide the overlay :

$scope.init = function() { // get data from twitter proxy service and fill the scope
        var x2js = new X2JS();
        $scope.tweets = [];
        
        tweetService.getTweets().success(function(data, status, header, config) {
            tweetlist = x2js.xml_str2json(data);
            $ionicLoading.hide();
            $scope.tweets = tweetlist.entries.entry;
        }).error(function(data, status, headers, config) {
            console.log("status : " + status + " FAILURE!");
        });
    }

Be sure to hide the overlay in a promise.

Link : $ionicLoading reference on ionicframework 1.2 website http://ionicframework.com/docs/api/service/$ionicLoading/

Print Email