Book Image

Learning Ionic

By : Arvind Ravulavaru
Book Image

Learning Ionic

By: Arvind Ravulavaru

Overview of this book

Table of Contents (19 chapters)
Learning Ionic
Credits
Foreword
About the Author
Acknowledgments
About the Reviewers
www.PacktPub.com
Preface
Index

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...