Loading progress with spinner


#1

I could not find any well explained tutorial to do this so, once I had it working, I decided to share it. Hope someone else find this helpful.
The main idea is to have a progress indicator on some REST actions as usually you spend some time doing comunication with a remote server. I wanted to have a message, a blocking page and a spinner, showing progress. I use the default spinner of the system so my template is only including the tags of ion-spinner.

.controller('AppCtrll', function($scope, $http, $ionicLoading) {
  $scope.show = function() {
    $ionicLoading.show({
      template: '<p>Loading...</p><ion-spinner></ion-spinner>'
    });
  };

  $scope.hide = function(){
        $ionicLoading.hide();
  };

  $scope.login = function() {
    // Start showing the progress
    $scope.show($ionicLoading);
    // Do the call to a service using $http or directly do the call here
    Service.service($scope, $http).success(function(data) {
      // Do something on success for example if you are doing a login
        var alertPopup = $ionicPopup.alert({
            title: 'Login successful!',
        });
    }).error(function(data) {
      // Do something on error
        var alertPopup = $ionicPopup.alert({
            title: 'Login failed!',
            template: 'Please check your credentials!'
        });
    }).finally(function($ionicLoading) { 
      // On both cases hide the loading
      $scope.hide($ionicLoading);  
    });  
  }
})

#2

http://learn.ionicframework.com/formulas/loading-screen-with-interceptors/

:smile:


#3

It’s almost the same :S well at least maybe the use of spinner can be helpful …


#4

I used the above method, but it is still not showing.


#5

Great works like a charm ! Thank you sir


#6

Works great! Thank you!


#7

thanks you, works great


#8

That’s working for me!Thank you!


#9

hi im beginner in ionic can someone give me course or some help other doc of ionic