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.