Ionic - Chargement Javascript

Le chargement ionique désactivera toute interaction avec les utilisateurs lorsqu'il sera affiché et le réactivera en cas de besoin.

Utilisation du chargement

Le chargement est déclenché à l'intérieur du contrôleur. Tout d'abord, nous devons injecter$ionicLoadingdans notre contrôleur en tant que dépendance. Après cela, nous devons appeler le$ionicLoading.show()la méthode et le chargement apparaîtront. Pour le désactiver, il y a un$ionicLoading.hide() méthode.

Manette

.controller('myCtrl', function($scope, $ionicLoading) {
   $scope.showLoading = function() {
      $ionicLoading.show({
         template: 'Loading...'
      });
   };

   $scope.hideLoading = function(){
      $ionicLoading.hide();
   };
});

Code HTML

<button class = "button button-block" ng-click = "showLoading()"></button>

Lorsqu'un utilisateur appuie sur le bouton, le chargement apparaît. Vous voudrez généralement masquer le chargement après la fin de certaines fonctionnalités fastidieuses.

Certains autres paramètres d'option peuvent être utilisés lorsque vous travaillez avec le chargement. L'explication est présentée dans le tableau ci-dessous.

Chargement des paramètres d'option

Options	Type	Détails
templateUrl	chaîne	Utilisé pour charger le modèle HTML comme indicateur de chargement.
portée	objet	Utilisé pour transmettre la portée personnalisée au chargement. La valeur par défaut est $ rootScope.
noBackdrop	Booléen	Utilisé pour masquer la toile de fond.
hideOnStateChange	Booléen	Utilisé pour masquer le chargement lorsque l'état est changé.
retard	nombre	Utilisé pour retarder l'affichage de l'indicateur en millisecondes.
durée	nombre	Utilisé pour masquer l'indicateur après un certain temps en millisecondes. Peut être utilisé à la place dehide() méthode.

Chargement de la configuration

La configuration Ionic est utilisée pour configurer les options que vous souhaitez utiliser dans tous les $ionicLoading services dans toute l'application.

Cela peut être fait en utilisant $ionicLoadingConfig. Étant donné que les constantes doivent être ajoutées au module principal de l'application, ouvrez votreapp.js et ajoutez votre constante après la déclaration du module.

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

Le code ci-dessus produira l'écran suivant -