Ionic - Carga de JavaScript
La carga iónica deshabilitará cualquier interacción con los usuarios cuando se muestre y la habilitará nuevamente cuando sea necesario.
Usando Cargando
La carga se activa dentro del controlador. Primero, necesitamos inyectar$ionicLoadingen nuestro controlador como dependencia. Después de eso, debemos llamar al$ionicLoading.show()aparecerá el método y la carga. Para deshabilitarlo, hay un$ionicLoading.hide() método.
Controlador
.controller('myCtrl', function($scope, $ionicLoading) {
$scope.showLoading = function() {
$ionicLoading.show({
template: 'Loading...'
});
};
$scope.hideLoading = function(){
$ionicLoading.hide();
};
});
código HTML
<button class = "button button-block" ng-click = "showLoading()"></button>
Cuando un usuario toca el botón, aparecerá la carga. Por lo general, querrá ocultar la carga después de que se terminen algunas funciones que requieren mucho tiempo.
![](https://post.nghiatu.com/assets/tutorial/ionic/images/loading-show.jpg)
Se pueden utilizar algunos otros parámetros de opciones cuando se trabaja con la carga. La explicación se muestra en la tabla siguiente.
Cargando parámetros de opciones
Opciones | Tipo | Detalles |
---|---|---|
templateUrl | cuerda | Se utiliza para cargar la plantilla HTML como indicador de carga. |
alcance | objeto | Se utiliza para pasar un alcance personalizado a la carga. El valor predeterminado es $ rootScope. |
no Telón de fondo | Booleano | Se usa para ocultar el telón de fondo. |
hideOnStateChange | Booleano | Se utiliza para ocultar la carga cuando se cambia de estado. |
retrasar | número | Se utiliza para retrasar la visualización del indicador en milisegundos. |
duración | número | Se usa para ocultar el indicador después de un tiempo en milisegundos. Puede usarse en lugar dehide() método. |
Cargando configuración
La configuración iónica se utiliza para configurar las opciones que desea utilizar en todos los $ionicLoading servicios en toda la aplicación.
Esto se puede hacer usando $ionicLoadingConfig. Dado que las constantes deben agregarse al módulo principal de la aplicación, abra suapp.js file y agregue su constante después de la declaración del módulo.
.constant('$ionicLoadingConfig', {
template: 'Default Loading Template...'
})
El código anterior producirá la siguiente pantalla:
![](https://post.nghiatu.com/assets/tutorial/ionic/images/loading-constant.jpg)