Ionic Tutorial for Mobile App Development – Part 1

By | March 20, 2017
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInDigg thisPin on Pinterest

Ionic framework enables to develop Native Mobile Application using HTML. In order to maintain the connection the native layer of mobile OS, Ionic is developed based on Cordova plugin and the next important thing of a hybrid mobile application development SDK is to provide a UI framework. Ionic is  a front-end UI framework developed on top of Angularjs. It is used to handle all of the appearance and behavior. Moreover, UI interactions of any mobile app needs in order to be compelling.Ionic Mobile App Development

Understanding Step by Step Ionic Mobile App Development

Mobile App Development with Ionic Framework

What is Ionic Framework?

Ionic Framework is a 100% free and open source project, licensed under MIT. As we discussed above Ionic framework enables to develop native Mobile Application Development using HTML, the only difference to traditional HTML web application and an Ionic App is; a web application can have link to other app and ionic app is a self-contained web application run in a single app shell.

Use native device features such as Bluetooth, HealthKit, Finger Print Auth, and more with Cordova/PhoneGap plugins and TypeScript extensions.

Ionic is a beautiful angularjs and Apache Cordova based free and open source SDK/Framework for hybrid mobile as well as web application development.  This also covers UX design and Front-end development by providing its own responsive CSS and SaaS. For more modernization, it uses HTML5. Ionic is based on Apache Cordova, therefore it leverages all the native mobile application features or services available in Cordova. Therefore, Ionic provides different mobile application native services like push notification or analytics.

This is often mistaken as an alternative to Cordova. However, it is not. It uses Cordova and add a UI layer to develop a complete hybrid application both front-end and back-end.
Ionic framework is based on Angularjs 1.0 and Ionic 2.0 is going to be based on Angularjs 2.0. Ionic 2.0 is already available.
Back to top

Basic Features of Ionic Framework

The basic feature provided by ionic framework are as following:

  • UI component, e.g navbar, splash screen and so on.
  • API: In Ionic it is possible to use some of the component or services as API, e.g. MenuController, Config or Platform.
  • Ionic Native: Almost all modern application are going to be written using ES5/ES6/TypeScript. Therefore, Ionic framework provides Ionic Native which is a ES5/ES6/TypeScript based wrapper for Apache Cordova which is used to provide any native functionality to the application. Therefore, Ionic Native enables to write a hybrid application in JavaScript using Apache Cordova. This works in as like all other modern web technology, therefore, wraps a callback in Promise or Observable.
  • Theme: Ionic provides blank slate theme so developer can define each and every UI templates, however, for faster implementation it also provides several theme. And it is also very easy to customize theme.
  • Ionicons: Icons for everything available and consistent to mobile application development.
  • Command Line Tool:  There is a command line tool to be used during the lifecycle of application development, starting from creating a project, start, build, serve and run. This tool can also be used for emulate.

Back to top

How to Install Ionic or Setup Development Environment?

In this Mobile App Development Tutorial, we are going to describe Ionic 2.0. Therefore, the following process are the steps to install Ionic 2.0.

  • Latest version of Nodejs need to be installed from [https://nodejs.org/]
  • Install the Ionic CLI and Cordova for native app development using following command.

Install Android Studio:

  • For Android application development, Android studio need to be installed

Requirement for Ios Application development:

  • Xcode 7 or higher
  • iOS 9
  • A free Apple ID or paid Apple Developer account
IBM Mobilefirst is another cool solution for hybrid application development.
Back to top

Life cycle of an Ionic application

In this section, we will discuss the life cycle of any page using a navigation. The main lifecycle events are as following:

  • ionViewDidLoad: This event is fired only when a view is stored in memory, which means if the view is already loaded. Therefore, for all the views those are already cached, this event is not fired while entering those view. Therefore, usually inside this event, necessary initialization piece of code are placed.
  • ionViewWillEnter: It’s fired when entering a page, before it becomes the active one. Use it for tasks you want to do every time you enter in the view (setting event listeners, updating a table, etc.).
  • ionViewDidEnter: Fired when entering a page, after it becomes the active page. Quite similar to the previous one.
  • ionViewWillLeave: Fired when you leave a page, before it stops being the active one. Use it for things you need to run every time you are leaving a page (deactivate event listeners, etc.).
  • ionViewDidLeave: Fired when you leave a page, after it stops being the active one. Similar to the previous one.
  • ionViewWillUnload: Fired when a view is going to be completely removed (after leaving a non-cached view).

Nav guards

As a bonus track, there are two other powerful methods related to those events: nav guards. Those methods are focused on view access control (with authentication purposes).

  • ionViewCanEnter: Fired before entering into a view, allows you to control whether the view can be accessed or not (returning true or false).
  • ionViewCanLeave: Fired before leaving a view, allows you to control whether the view can be left or not.

It is important to highlight that Nav Guards are executed before any other lifecycle event method.

Back to top

How Navigation works in Ionic 2?

In ionic 1.0 it was state provider which was responsible for navigation and in Ionic 2 it has been performed using NavController, NavParams and Page.

There is a navigation Stack and every time a new page is being displayed on the screen it is being pushed to the navigation stack. It is exactly same as browser history: each time a page is being visited, a new page is added to the history list. In Ionic app, the new view is pushed to the navigation stack. On the other hand, on hitting the back button, it goes to previous item in the history. In case of Ionic app, the top view on the stack is removed and the next one is viewed.

NavController class has two methods push and pull. NavController class is inject to the component or Page by instantiating it on the constructor of the component. For example

Moving from One view to another

In order to go to another View for example Page2, a new page is added onto the navigation stack. Adding views to the navigation stack uses a push method as following:

This is also possible to pass parameter while moving from one page to another as following:

This is also possible to pass a complete object as following:

In order read the parameter in Page2,

Moving from Popover to Application Page

In order to navigate from an overlay component (popover, modal, alert, etc), for example, if it is required to navigate from a popup and hit the cancel button on it navigate to main application page for example on Page2.

Getting back to the previous View 

In order to go back a page, it needs to pop the view off the top of the stack.  Removing items from the stack is performed by triggering pop method.

There are a few more methods available on the NavController such as insert, remove, etc. In some cases, it is necessary to know different life cycle event while navigating from one page to another, for example, may be when a form page is leaving there would be a popup to make sure that user really wants to leave or not?. To allow such actions, NavController has the ionViewCanEnter and ionViewCanLeave methods.

However, it is necessary to make sure that or navCtrl.push has a catch in order to catch the and handle the error.
Back to top

Ionic Framework support for Caching View

One of the most useful feature in Ionic is as mobile application need to be fast and use less memory at any time, Ionic framework support caching view. Therefore, unused view at any moment of time would be cached and it would provide better performance.

Caching Mechanism:

  • Whenever any view is visited, a corresponding element is added to the DOM. The controller is already loaded.
  • When the View is left, the corresponding element is not removed from the DOM, its only disconnected from the $watch cycle. Scopes are not being destroyed only disconnected.
  • Now if the View is visited again, a new element need not to be created as it is already in the DOM. The controller need not to be loaded again, thus saves time. The corresponding element just been reconnected to the $watch cycle  again and therefore, it becomes active again.

How to disable Cache:

  • To disable cache globally it need to configured as following
  • Disable cache using stateprovider
  • Disable cache with an attribute in ion-view. According to the example, Home page view will not be cached.

Some features of View Caching:

  • Caching can be enabled and disabled.
  • It is possible to disable even only an individual view to be cached.
  • The maximum number of view that can be cached at any time is configurable using ionic variable ‘$ionicConfigProvider’. The default value of maximum catchable view is 10.
  • While navigating forward-cache is disabled by default. Therefore, it need to be enabled.

Back to top
This was part-1 in Developing Mobile Application using Ionic Framework.  Following parts in this series will contain more practical examples.  So, keep in touch.

More Mobile App Development and Related Articles:

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInDigg thisPin on Pinterest