Developing Mobile Applications Using Ionic framework and AngularJS

Have you ever wondered how it is possible to build amazing and highly interactive mobile apps by using only web development languages? 😲😲

Ionic framework along with AngularJS make it all possible!

It is extremely cumbersome to make mobile apps for various platforms especially due to the complications of using java, Objective C or Swift. Thus, more easy and straight-forward approach is being used nowadays is the ionic framework which allows the developers to build multiple platforms by simply using web development languages in order to create amazing mobile applications.

Ionic framework is built on top of AngularJS and Apache Cordova. AngularJS is an open source web application framework which is used in developing single page while Apache Cordova lets developers to build mobile applications using JavaScript, CSS and HTML instead of using platform specific application programming interfaces (APIs’) like iOS and Android. When we talk about ionic framework, it is also an open source software development kit that is used in order to create hybrid mobile applications using AngularJS and Apache Cordova.

So, now you are dying to know about what a hybrid mobile application is and what the difference between hybrid app and native app is. 😖😖😖

Native app refers to app that is built for specific operating system and can be access only from specific app store while hybrid app refers to app built for several operating systems and distributed across multiple app store. Imagine that we have to develop a native app for multiple operating systems, this will result in consuming more time as we have to develop each operating system separately. But if we want to develop a hybrid app for multiple operating systems that will save time because we only need to develop once. As well as, native apps are coded according to the native language of the device. For an instance, java for Android and Objective C for iOS. On the other hand, hybrid apps are coded using HTML, CSS and JavaScript.

I am saying that, if you are a web developer who is capable of HTML, CSS and JavaScript, I guarantee that you are 80% ready to create your mobile app. You have to just wrap your code with native framework, and deploy it to any platform that you want. So, it is obvious that ionic is a new, immensely growing technology and is extremely simple and easy to use. 

Hybrid mobile app development using Ionic framework and AngularJS

Getting Started with Ionic Framework

In this post, I am going to walk you through how to set up the environment to build the app. Let’s see how to install Cordova and Ionic.

In order to install Cordova, make sure that you have installed NodeJS. Then open your windows command prompt and run;

C:\Users\Username>npm install –g cordova

After the installation of Cordova, you have to install Ionic. To install Ionic simply run;

C:\Users\Username>npm install –g ionic 

Then, if you want to know about the versions of ionic and Cordova you can run;

C:\Users\Username>ionic –v

C:\Users\Username>cordova –v

In my case;

Creating the project

Let’s start to create our first app. When you build your app, you can choose from three options to start. You can select;

·        Tabs app

·        Blank app

·        Side menu app

Tabs App - This facilitates with tab menu, header and couple of useful screen and functionalities.

Blank App – If you want to start from scratch, you can install ionic blank template.

Side Menu App- If you want to start from side menu template you can use this.

1.     Open your command window and choose where you want to create your app. Assume that I am going to create my app in Desktop. First, change working directory by running; C:\Users\Username>cd Desktop

2.     Then, create a folder. Here I named it as firstApp.

For creating a tab template, C:\Users\Username\Desktop>ionic start firstApp tabs

For creating a blank template, C:\Users\Username\Desktop>ionic start firstApp blank

For creating a side menu template, C:\Users\Username\Desktop>ionic start firstApp sidemenu

3.     Next, access to the folder that we just crated by running;

C:\Users\Username\Desktop>cd firstApp

4.     Now we have to add Cordova project for android platform and install basic Cordova plugins. This allows us to run the app on android device. C:\Users\Username\Desktop\firstApp>ionic platform add android

5.     Next step is to build our app,

C:\Users\Username\Desktop\firstApp>ionic build android

6.     The last step is to run your app.

C:\Users\Username\Desktop\firstApp>ionic run android

If you want, you can test your app in browser as we are using JavaScript here.

C:\Users\Username\Desktop\firstApp>ionic serve

The above command will open your app in browser. Google Chrome facilitates device mode functionality for mobile development testing. Press F12 to access developer console. The top left corner of the console window has “Toggle device mode” icon. Click it. 

 Next, you need to click “Dock to right” icon in top right corner. 

Now, you are ready to test on web browser as shown in below.

In summary, Ionic framework along with AngularJS facilitates the developers to develop hybrid mobile apps in an interesting and easy manner. I will further talk about creating mobiles apps in my next post.

Till then, happy coding...!!! 😊😊😊