Ionic loading

The first service we are going to take a look at is $ionicLoading. This service is highly useful when you want to block a user's interaction from the main page and indicate to the user that there is some activity going on in the background.

To test this, we will scaffold a new blank template and implement $ionicLoading; run this:

ionic start -a "Example 21" -i app.example.twentyone example21 blank

Using the cd command, go to the example21 folder and run this:

  ionic serve

This will launch the blank template in the browser.

We will create an app controller and define the show and hide methods inside it. Open www/js/app.js and add the following code:

.controller('AppCtrl', function($scope, $ionicLoading, $timeout) {

    $scope.showLoadingOverlay = function() {
        $ionicLoading.show({
            template: 'Loading...'
        });
    };
    $scope.hideLoadingOverlay = function() {
        $ionicLoading.hide();
    };

    $scope.toggleOverlay = function() {
        $scope...