By Jay Raj

Building a Simple App Using Ionic, an Advanced App Framework

By Jay Raj

Since the inception of Hybrid Mobile technologies, the number of web developers turning to mobile development has increased tremendously.

Hybrid mobile technologies empower a web developer to develop mobile applications which run on multiple mobile platforms. All without learning native platform languages and utilizing existing skills.

Hybrid Mobile technologies have evolved a lot and many different platforms exist, such as PhoneGap and Titanium.

A new Hybrid Mobile development platform to consider is Ionic.

Ionic is an advanced HTML5 Hybrid Mobile App Framework. It’s an open-source front-end framework for creating beautiful mobile applications using HTML5.

Ionic apps are based on Cordova, so Cordova utilities can be used to build, deploy and test apps. Ionic focuses on the look and feel of apps and it currently uses AngularJS to build awesome looking front-ends.


To get started with Ionic, first make sure you have Node.js installed.

Next, depending on the app platform for which you plan to develop, install the required Android or IOS platform dependencies. In this article, we’ll try to create an app for Android.

Next, install the latest Cordova and Ionic command line tool as shown below:

npm install -g cordova ionic

When the installation is complete, try to create a new project with a tabs template as shown below:

ionic start myIonicApp tabs

Navigate to the project directory, add the ionic platform, build the app and emulate it as shown below:

cd myIonicApp
ionic platform add android
ionic build android
ionic emulate android

Here is how the default tabs template app looks:
enter image description here

Getting Started

We are going to create a simple ToDo List application. Let’s create a simple app using a blank template, so that we can start from scratch. Create a new app using the blank template as shown below:

ionic start myToDoList blank

If you navigate to the myToDoList/www directory you can see the AngularJS files. This is where we’ll add the relevant code to create our app.

Creating and Displaying a List

Firstly, we need to create a list to show the to do list. For this we’ll make use of the ion-list directive. Add the ion-list to our www/index.html
as shown below:

  <ion-item>Scuba Diving</ion-item>
  <ion-item>Climb Mount Everest</ion-item>

After adding the above ion-list to index.html here is how the full html code looks:

<!DOCTYPE html>

  <meta charset="utf-8">
  <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">
  <link href="css/style.css" rel="stylesheet">

  <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/" rel="stylesheet">

  <!-- ionic/angularjs js -->
  <script src="lib/ionic/js/ionic.bundle.js"></script>

  <!-- cordova script (this will be a 404 during development) -->
  <script src="cordova.js"></script>

  <!-- your app's js -->
  <script src="js/app.js"></script>

<body ng-app="starter">

    <ion-header-bar class="bar-stable">
      <h1 class="title">My ToDo List</h1>
        <ion-item>Scuba Diving</ion-item>
        <ion-item>Climb Mount Everest</ion-item>


Now, rebuild and emulate the app to see the list in action.

As seen in the code above, using ion-list we hard coded 2 items to our to do list. In order for the app to be fully functional, we should be able to add and view list items dynamically.

Inside, www/js/ create a controllers.js file and define a new controller called ToDoListCtrl inside it. Here is how the controllers.js file looks:

angular.module('starter.controllers', [])
    .controller('ToDoListCtrl', function ($scope) {

In the above code, we defined a new module called starter.controller and defined a new controller called ToDoListCtrl.

Next, we need to add this module to our existing application. Open www/js/app.js and add this module to it.

Here is how the app.js code looks after adding the new starter.controllers module.

angular.module('starter', ['ionic', 'starter.controllers'])
.run(function ($ionicPlatform) {
  $ionicPlatform.ready(function () {
    if (window.StatusBar) {

Next, define a $scope to carry the to do list items. Inside, ToDoListCtrl declare a new $scope variable called toDoListItems as shown below:

.controller('ToDoListCtrl', function ($scope) {

  $scope.toDoListItems = [{
    task: 'Scuba Diving',
    status: 'not done'
  }, {
    task: 'Climb Everest',
    status: 'not done'

Include the controllers.js in the index.html after app.js.

We need to attach the above controller logic to our ion-list in the index.html. Modify the ion-list as shown below:

<ion-list ng-controller="ToDoListCtrl">
  <ion-item ng-repeat="item in toDoListItems">

As you can see in the above code, we used the ng-controller directive to attach the controller to the ion-list. We have used the ng-repeat directive to iterate the toDoListItems defined in the $scope variable and display in the list.

Now, rebuild the app and emulate and you should the list in action.


Adding Items to List

Next, we need to implement a way to add items to the existing list. For this, we’ll make use of ionicModal which will slide up after clicking a button on the listing page.

First add a new button on top of the listing page to add new items to the list.

Next, let’s make our header look more colorful by making use of ion-header-bar. Modify the code as shown below:

<ion-header-bar align-title="left" class="bar-positive">

  <h1 class="title">My ToDo List</h1>

  <div class="buttons">
    <button class="button" ng-click="openModal()">Add</button>

As you can see in the above code, we added ion-header-bar with a class bar-positive which is what gives it that color. You can have many different types of header, refer to here for detailed documentation.

We have also added a new button to the right side of our header called Add which calls a function to open a modal window (which we’ll define shortly).

Add the modal pop up to the index.html as shown below:

<script id="modal.html" type="text/ng-template">
<div class="modal">

  <div class="bar bar-header bar-calm">
    <button class="button" ng-click="closeModal()">back</button>
    <h1 class="title">Add Item</h1>
  <form ng-submit="AddItem(data)">
    <div class="list">
      <div class="list list-inset">
        <label class="item item-input">
          <input type="text" placeholder="ToDo Item" ng-model="data.newItem">
      <button class="button button-block button-positive" type="submit">
        Add Item


As per the above code, we have a header inside our modal, an input box and Add button to add new items to the to do list.

We have a back button in the header, which we have attached a closeModal() function to using ng-click to close the modal. We have attached a function called AddItem to a form using ng-submit, adding items to the existing list on form submit.

Now, we need to bind the ionic modal to our controller. We inject $ionicModal to the controller and define the required functions as shown below:

angular.module('starter.controllers', [])

.controller('ToDoListCtrl', function ($scope, $ionicModal) {

// array list which will contain the items added
$scope.toDoListItems = [];

//init the modal
$ionicModal.fromTemplateUrl('modal.html', {
  scope: $scope,
  animation: 'slide-in-up'
}).then(function (modal) {
  $scope.modal = modal;

// function to open the modal
$scope.openModal = function () {

// function to close the modal
$scope.closeModal = function () {

//Cleanup the modal when we're done with it!
$scope.$on('$destroy', function () {

//function to add items to the existing list
$scope.AddItem = function (data) {
    task: data.newItem,
    status: 'not done'
  data.newItem = '';


As seen in the above code, we used .fromTemlateUrl to load the html content and defined two options during initialization to define $scope and the type of animation used whilst content is loading.

We also defined functions to open, close the modal and a function to add items to existing array.

Demo Screen

Our implementation is now complete and we are ready to run and emulate our app. Save all file, rebuild and emulate the app. Here is how the two screens of our to do list app should look:

enter image description here
enter image description here


In this article, we saw how to get started with Ionic – an advanced HTML5 framework for Hybrid App Development. We used some Ionic utilities like ionicModal and ion-list to develop a simple and basic to do list app.

The app can be extended with many features detailed here. I recommended referring to the AngularJS doc for a better understanding of AngularJS. In the mean time code from the above article is available on GitHub.

  • Wow, this looks very interesting. I am definitively going to give it a try…

    Any recommendations on follow up reading to learn more about Ionic?

  • Joshua Sherer

    Thanks for the tutorial. I noticed a few discrepancies between your code here and what you have in GIT. In GIT, you have: — ng-controller=”ToDoListCtrl” — in and on your tut page you have this attribute in the . Also in the in GIT, you have the class set to “bar-positive” which makes the header blue like in your screenshot. Anyway thanks again! I’m looking forward to working more with Ionic

  • Guest

    Strange but openModal doesn’t work for me.

  • Joshua

    While I appreciate the tutorial it always irks me when people essentially copy and paste a tutorial from some where else, in this case the documentation…. If someone really wanted to give back to the open ionic community build something original and different then make a tutorial around it. Don’t just rehash someone else’s work for ad revenue.

  • ImINaBAR

    I’m new at angular and had the same problem, in the tutorial the Author missed telling us to move the ng-controller="ToDoListCtrl" to the element, so the controller also affects the element and the button inside it works properly.

    • Jay

      Thnks for noting that @ImINaBAR:disqus .Will get that corrected soon !!

    • Also make sure the script containing modal is added inside body tag (not header tag) just right after ion-pane closing tag.

  • Chris Ward

    Thanks for this, I’m the channel editor. I’m having a chat to the writer about this and I’ll see what he says. I try my best to check all sources before publishing. Again, thanks for your comment, and also being pleasant about it!

  • This is awesome. Thank you!

  • Yes they do… that was my first stop actually. Still looking for more tutorials and such. Thank you!

  • Jay

    Thanks for appreciating the tutorial @Joshua . As far as your comment regarding copy pasting the whole tutorial from the guide is concerned, I beg to differ on that. I believe you are referring specifically to the code, if not then please do read the whole tutorial one more time. Its not a copy paste although I agree that there are some similarities in the code given that It’s a small app which uses ion-list to list the items and modal to add the items to the list. As far as the similar code is concerned, I have used a basic template which IONIC provides that is where some code is common. I also have used ion-list to show items, and modal for pop up referring the api documentation.$ionicModal/ . . I believe the guide was also created using the apis provided by IONIC and i too have used the same. So it’s obvious that there are bound to be some similarities in the code. But please, that doesn’t mean its a simple copy paste.

  • Jay

    Thnks for the feedback @josh . Will get the discrepancies sorted out soon.

  • kilinkis

    I tried it a few months ago and the performance wasn’t that good. I will wait a little to use it again.

  • Baradwaj

    Hi Jay… A wonderful tutorial… But my question is a little of the topic.
    How can we transfer the control from the html page to the android activity (or)
    how can we start an activity from the html page using the latest version of the cordova.
    Because I developed a model using the angular js and now I need to send push notifications using the which I can do only through the native code.
    please help me with this.

  • Craig Shell

    Trevor are you out of your mind? The documentation totally sucks and there’s no support on The forum

  • nice write up! @disqus_CR7gPIRJpz:disqus

  • thanks.

  • Hi. This is a nice framework. I have used this one. I have also used various other mobile app development software such as phonegap, Configure.IT, Telrik etc. I like Configure.IT the most because of its extraordinary features such as,

    Do you need custom design for your App? Design your App UI in
    Photoshop®, and you’ll be able to import your entire UI as .PSD files
    into Configure.IT Mobile Application Configurator – and Configure.IT
    convert .PSD files into mobile app design interface that you can
    instantly preview on device. This completely eliminates the time to
    implement design into actual app UI.

  • Vignesh

    Thanks for this tutorial… where can i get the source code for this

  • Boyong Lambert

    Thank you very much Jay for this tutorial. It is my first time to build a mobile app. I have been able to run my example in the browser. I have problems at the level of running my app in the sdk emulator. When I run the command ‘ionic emulate android’ the emulate starts with it default apps but my app is not there. the CLI last line says ‘waiting for emulator…’. Please I really need help. Thanks you in advance.

  • Sabari Sri

    Hi, The tutorial was very useful. Can u pls help me ,(a) how can i create a app icon in mobile. and (b) suppose i run the app on ,then on clicking the mobile app icon in my mobile remotely, how can i reach the host url to run the app actually. I am a basic learner. I just want to know how to deploy the app to my remote url. Tutorials/links for this question would be a great help.

  • Arjun Menon

    After npm install, running
    ionic start myIonicApp tabs

    /usr/bin/env: node: No such file or directory

    Using xubuntu 14.04

  • Ionic is awesome! My app ( was built using Ionic + Meteor via Meteoric package which is an Ionic framework without Angular, instead it uses Meteor helpers.

  • Very clear and simple! Thanks for sharing

    I’ve just made my own Crystal Ball mobile application using AngularJS and Ionic and I felt the need to do a step by step tutorial about it

  • trixx

    what’s de advantage of ‘$scope.modal.remove();’? I’ve never used it before and don’t see my app having any lags as a result.

  • Tatiana Gelvez

    I do not understand in what part of the code I have to add the modal pop up script …. would you help me please ?

  • Babita Bhandari

    Hello sir where should i put the modal code in index.html means in which section i put the modal code in index.html.When i add my code in index.html it overlaps the add task list and task shown in list.

  • Christian Yaputra

    sorry can i ask…
    i want to know where is the exact position in index.html to put this script:

    because i dont see where to put in above the tutorial…thx

  • Christian Yaputra

    i’ve already try to code the same just like your tutorial and the one in github…but after i run it, the ‘add’ button doesn’t work..nothing show up…can someone help me?

    • Jay

      Hey @christianyaputra:disqus please check the source code on GitHub and you should get an idea about where to add the modal pop up script. Or better clone the project from GitHub and try running. I tried it recently and its still working fine. Thanks :)

  • heer

    nyce…its helpfull for me…

  • heer

    how data insert database in ionic framework……………….????

  • Oghenez

    @disqus_CR7gPIRJpz:disqus Do I have to use Node.js? I would prefer a GUI interface rather than command line

Get the latest in Mobile, once a week, for free.