Ionic loading icon

Oggi vediamo come usare le loading icon in Ionic.

In sostanza, è la classica icona animata di caricamento, usata quando vengono lanciate alcune operazioni, e per avvertire l'utente quando la suddetta operazione è terminata.

Creeremo due funzioni nel controller principale / generale della nostra app, e poi richiameremo queste funzioni dove ci serve.

Prima di tutto scriviamo le due funzioni, da inserire nel controller principale:

angular.module('starter.controllers', ['ngCordova'])
        .controller('AppCtrl', function ($scope, $ionicLoading) {
            $scope.closeLoading = function () {
                $ionicLoading.hide();
            };
            $scope.openLoading = function () {
                $scope.loadingIndicator = $ionicLoading.show({
                    content: 'Loading Data',
                    animation: 'fade-in',
                    showBackdrop: false,
                    maxWidth: 300,
                    showDelay: 500
                });
            };
        })

A questo punto abbiamo le due funzioni (apertura e chiusura) disponibile in qualsiasi parte della app.

Nalle funzione di aprtura, impostiamo un pò di parametri (contenuto, tipo di animazione, dimensione, ecc).

Per richiamarle in un altro controller ci basta una cosa del genere:

.controller('MyCtrl', function ($scope, $rootScope) {
     $scope.openLoading();
     // DO STUFF
     $scope.closeLoading();
})

Sono esempi abbastanza semplici ma da cui si può prendere spunto!

Enjoy!