Ionic - Carregando Javascript

O carregamento iônico irá desativar qualquer interação com os usuários quando mostrado e ativá-lo novamente quando for necessário.

Usando Carregando

O carregamento é acionado dentro do controlador. Primeiro, precisamos injetar$ionicLoadingem nosso controlador como dependência. Depois disso, precisamos ligar para o$ionicLoading.show()método e carregamento aparecerá. Para desativá-lo, há um$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>

Quando um usuário toca no botão, o carregamento aparecerá. Normalmente, você desejará ocultar o carregamento após a conclusão de algumas funcionalidades demoradas.

Alguns outros parâmetros de opção podem ser usados ​​ao trabalhar com o carregamento. A explicação é mostrada na tabela abaixo.

Carregando parâmetros de opção

Opções	Tipo	Detalhes
templateUrl	corda	Usado para carregar o template HTML como indicador de carregamento.
escopo	objeto	Usado para passar o escopo personalizado para o carregamento. O padrão é $ rootScope.
noBackdrop	boleano	Usado para esconder o cenário.
hideOnStateChange	boleano	Usado para ocultar o carregamento quando o estado é alterado.
demora	número	Usado para atrasar a exibição do indicador em milissegundos.
duração	número	Usado para ocultar o indicador após algum tempo em milissegundos. Pode ser usado em vez dehide() método.

Carregando configuração

A configuração Ionic é usada para configurar as opções que você deseja usar em todos os $ionicLoading serviços em todo o aplicativo.

Isso pode ser feito usando $ionicLoadingConfig. Uma vez que constantes devem ser adicionadas ao módulo principal do app, abra seuapp.js arquivo e adicione sua constante após a declaração do módulo.

.constant('$ionicLoadingConfig', {
   template: 'Default Loading Template...'
})

O código acima irá produzir a seguinte tela -