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);
});
}
})