Ionic: Loading screens

When we are coding an app, we usually need to implement some procedures that take a time to complete. An user may get impatient if the screen is frozen while this actions are taken on the background, that is why developers set up loading screens that let the user know something is going on.

Ionic framework includes this functionality the easiest way possible in three simple steps we need to implement in our controller:

1. Inject the dependencies

First, we need to let our controller know it will need the Ionic implemented service called “$ionicLoading”, so we must inject the dependency on its declaration. Something like this:
...
.controller('myAppCtrl',['$scope','$ionicLoading', function($scope, $ionicLoading) {
...

With '$ionicLoading' we tell the controller that the component is going to be used. When we add $ionicLoading as a parameter for the function, we are creating the variable that will provide us with the loading screen functionality.

2. Show the loading screen

Right before we launch that API call, HTTP request or whatever time consuming process we need to perform, we will show the loading screen with something like this:
// Show loading screen
$ionicLoading.show({
content: 'Loading',
animation: 'fade-in',
showBackdrop: true,
maxWidth: 200,
showDelay: 0
});

This simple code will show a standard loading screen provided by Ionic with the properties we are providing. More info on this properties can be found on Ionic’s documentation on $ionicLoading.

3. Hide the loading screen

When the time consuming task is finished, we must hide the loading screen. We would have to place this code on, for instance, the callback of an HTTP request:
// Hide loading screen
$ionicLoading.hide();

Custom loading screens

If you look at Ionic’s documentation on $ionicLoading, you will see that one of the options we can provide is a template. We just need to specify an html file from our templates directory and it will be used as a loading screen. You can even specify the HTML code you want inline:
$ionicLoading.show({
template: 'Loading... Please wait.'
});

Creating an Ionic project from scratch

¿What is Ionic?

That seems a reasonable question, if haven’t ever heard about Ionic. We are talking about a framework that makes your life easier as a mobile apps developer.

Based on popular Cordova library, Ionic is used to easily develop and deploy cross platform hybrid apps. The big advantage of Ionic is that it also helps you leverage the power of AngularJS, which is already embedded in the framework.

Another interesting thing is that Ionic offers you a free hosting for your app that enables you to send a preview of your working app to anyone or simply test it on your device without the nuisance of connecting it to your computer. It is called Ionic Platform.

Installing Ionic

First of all, let’s talk about the prerequisites. To create a project following this tutorial you will need to have NodeJS and Git installed and accessible from the path:

Now that we have both ready, we will need to install Bower:
npm install bower

And proceed to install Ionic Framework using NodeJS:
npm install -g cordova ionic

That was easy, right?

Creating a project

Ionic can create a project for us and easily port it to iOS, Android or a desktop computer web browser. Remember a hybrid app is just a website, so we can test our design using our browser before we deploy it to a device.

Let’s be original and call our little project “myApp”.

Now, we navigate to the folder we want to create the project in on a CLI and execute the following command:
ionic start myApp tabs

That will create a folder structure for a basic app based on a template called “tabs”. Ionic has a lot of different app templates you can use.

ionic-folders
Ionic app folder structure
ionic-folders2
Ionic app folder structure: /www

In that structure, you’ll notice a folder called “www”. You guessed it, inside that folder you can find the website that will be converted into a nice mobile app. You can play with it and modify it as you wish, but the most important stuff is inside the folders “templates” and “css”.

Operating with the project

The full CLI reference can be found here.

There are a few useful commands you want to know:

Running and emulating

To launch the app on a web browser, just execute ionic serve.
If you want to run it on an emulator, you will first have to add the platform:
ionic platform add ios or ionic platform add android
Build the app:
ionic build ios or ionic build android
And emulate it:
ionic emulate ios or ionic emulate android

Interacting with Ionic Platform

You will need to have an account in Ionic Platform before you can follow these steps.
To interact with Ionic Platform, you will have to install it first. That is what Git an Bower are for:
ionic add ionic-platform-web-client
Then start the platform and log into it:
ionic io init
Just execute ionic upload and follow the simple steps provided by the CLI and your app will be uploaded to the platform.
To view your app on your device, you’ll have to install “Ionic View” app from your App store.

Conclusion

It is really easy to set up a new Ionic project. It is even easier to upload it to Ionic Platform and see how your app can look when it comes alive. This is just the beginning, the rest is up to you!