Overview

Welcome! Ionic is a powerful open source HTML5 SDK that helps you build native-feeling mobile apps using web technologies like HTML5, Sass, CSS, and Javascript.
Ionic framework mainly built for the UI – interaction of  the app  ionic frameworks pre defined UI sets helps to create stunning app in quick time.
Ionic framework  built with AngularJS and Apache Cordova,  Ionic apps can be distributed through native app stores like (apple store and google play store) .
Ionic was founded by Max Lynch, Ben Sperry, and Adam Bradley of Drifty Co. in 2013.

Install Ionic

Ionic frameworks includes compiled Javascript AngularJS  and CSS styles , JS framework extension  and large pack of ion icons that will make the app development process a lot easier.

Ionic framework needs NodeJs and Apache Cordova and npm

Install NodeJS and npm then use the following commands to install Cordova

$ sudo  npm install -g cordova

Then

Install Ionic framework as global in your system

$ sudo npm install -g ionic

Create new project

Now, all related software programs are installed and we need to create new Ionic Cordova project, use the following command for that.

$ ionic start sampleapp blank

That will create a folder called sampleapp in the directory where the command was run. Next, we will go into that directory and list the contents. The folder structure of Ionic app will look like the following.


├── bower.json     // bower dependencies
├── config.xml     // cordova configuration
├── gulpfile.js    // gulp tasks
├── hooks          // custom cordova hooks to execute on specific commands
├── ionic.project  // ionic configuration
├── package.json   // node dependencies
├── platforms      // iOS/Android specific builds will reside here
├── plugins        // where your cordova/ionic plugins will be installed
├── scss           // scss code, which will output to www/css/
└── www            // application – JS code and libs, CSS, images, etc.

 

Configure Platforms

And we need to configure the application platform (IOS or Android) use the following commands for that:

$ ionic platform add ios

or
$ ionic platform add android

Starting your app

Now, every related softwares installed and app configured let’s start the real app

The sampleapp is just outline blank page with side bar, we can start with Ionic with this.

Ionic app is basically a web page, every app must  have an index.html file in our app folder which defines the first page that loads in the app. Let’s create www/index.html and initialize it with this:

Initializing the app

For starting ionic app we need to create AngularJS module and  initialize it. Let’s create a new file located at www/js/app.js. Put this code into the file:

angular.module(sampleapp , ['ionic'])

We have already included the app.js file in the index.html after the loading of Cordova file . Because Angular module uses ng-cordova functions for certain modules.

For run our app, we need to add the ng-app attribute to the body tag:

And we need to add some sidebar content of mobile app in the first page, for that, we can use the following HTML codes.

Test your app

They are several methods to test our ionic app  first one is Browser test, second one is simulator test , third one is build then test with respected platform , fourth one is test with phone’s browser.

Desktop browser testing

For testing the Ionic app in your browser, you need to run the following commands in command line

$ ionic serve

Simulator testing

For simulator testing, we need to build first and then simulate you can use the following to test with simulator

For ios

For Android

You can build as native app  for that you can use the following command:

This post is just an introduction to the Ionic framework. I intend to create a sample app with this framework with my next post, kindly leave your valuable comments. Have a gread day, happy coding !

Post By : Rahul VV (1 Posts)

"Rahul V V is a dedicated Software Engineer and web developer with over 3.6 years ,experience in Application Development and UI Development, Hybrid Mobile Application Development. He is a specialist in Codeigniter, Laravel, Angular JS, Javascript, Ionic, PhoneGap, jQuery Mobile, Bootstrap, Foundation, PHP, & MySql ."


You might also like...

INDIA OFFICE

info@cubettech.com
+91 484 4054324
Skype : cubettech
Leela Info Park,
Unit IX-C, 9th floor PhaseIV,
Kochi, Kerala, India

LONDON OFFICE

info@cubettech.com
+44 2071938618
Skype : cubettech
Kemp House
160 City Road
London- EC1V2NX, UK.
Top