Uso del Backdrop y Loading

Alexander A. Ramírez M.

A veces hace falta llamar la atención sobre alguna información emergente o sencillamente quitarle un poco de relevancia a lo que está en la pantalla actualmente, por ejemplo cuando se están cargando nuevos datos.

Para ello Ionic ofrece el Backdrop y adicionalmente el Loading. El punto es que es único en toda la aplicación y lo provee el servicio $ionicBackdrop. Por otra parte cuando estamos cargando datos se suele utilizar un indicador de carga de datos, este servicio se llama $ionicLoading

Ingrese a play.ionic.io para obtener el código para iniciar el tutorial y haga FORK. No olvide hacer FORK.

El objetivo es:

  • Mostrar el Backdrop por 5 segundos.
  • Mostrar el Loading 1 segundo después que inicia el Backdrop.

En el HTML, en el contenido cree un botón para activar el Backdrop. Debe especificar a través de la directiva ng-click de AngularJS la rutina que se va a ejecutar para iniciar el Backdrop.

<p>
  Como usar el Backdrop...  y el Loading de Ionic
</p>
<button class="button button-block button-positive icon ion-flag" 
  ng-click="showBackdrop(5000)">
</button>

Fíjese que a la rutina showBackdrop le estamos especificando un número 5000. Este sería el tiempo en ms que se va a mostrar el Backdrop.

Ahora en el JS inyecte el servicio para utilizar el Backdrop $ionicBackdrop y también el servicio $timeout de AngularJS. El servicio $timeout nos devuelve una promesa que retorna después de que pasa el tiempo especificado y se ejecuta la función especificada. Sirve para ejecutar alguna acción o sencillamente devolver una promesa después de un tiempo definido.

.controller('contentController', function($scope, $ionicBackdrop, $timeout) {

Ahora vamos a definir nuestra rutina showBackdrop.

$scope.showBackdrop = function(milis) {
  $ionicBackdrop.retain();
  $timeout(function(){
    $ionicBackdrop.release();
  }, milis);
};

Ahora vamos a usar el servicio $ionicLoading. Primero lo debemos inyectar al controlador.

.controller('contentController', function($scope, $ionicBackdrop, 
  $timeout, $ionicLoading) {

Los métodos de $ionicLoading son show y hide. En el caso de show se especifica un objeto con los parámetros que utiliza el servicio. Ahora vamos a incorporarlo en la rutina showBackdrop.

$scope.showBackdrop = function(milis) {
  $ionicBackdrop.retain();
  $ionicLoading.show({
    template: 'Loading...',
    delay: "1000"
  });
  
  $timeout(function(){
    $ionicLoading.hide();
    $ionicBackdrop.release();
  }, milis);
};

Como puede observar ahora, cada vez que presiona el botón en la pantalla principal, aparece el Backdrop y luego de un segundo aparece el Loading.

Puede consultar el resultado final si lo desea.