Getting Started with the Ionic framework

  • Cubettech
  • Mobile Application Development
  • 8 years ago
Getting Started with the Ionic framework


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


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

$ 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:

<!DOCTYPE html>
   <meta charset="utf-8">
   <title>Sample App</title>
   <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
   <link href="lib/ionic/css/ionic.css" rel="stylesheet">
   <script src="lib/ionic/js/ionic.bundle.js"></script>
   <!-- Needed for Cordova/PhoneGap (will be a 404 during development) -->
   <script src="cordova.js"></script>
   <script src="js/app.js"></script>

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:

<body ng-app="‘sampleapp’">

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

<body ng-app="‘sampleapp’">

   <!-- Center content -->
     <ion-header-bar class="bar-dark">
       <h1 class="title">Todo</h1>

   <!-- Left menu -->
   <ion-side-menu side="left">
     <ion-header-bar class="bar-dark">
       <h1 class="title">Projects</h1>


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

$ ionic build ios
$ ionic emulate ios

For Android

$ ionic build android
$ ionic emulate android

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

$ ionic run android

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 great day, happy coding !

Table of Contents

    Contact Us


    What's on your mind? Tell us what you're looking for and we'll connect you to the right people.

    Let's discuss your project.