🤯 50% Off! 700+ courses, assessments, and books
Browse Titles
Mobile

Building a Simple App Using Ionic, an Advanced App Framework

Jay Raj
Share

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.

Installation

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-list>
  <ion-item>Scuba Diving</ion-item>
  <ion-item>Climb Mount Everest</ion-item>
</ion-list>

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

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title></title>

  <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/ionic.app.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>
</head>

<body ng-app="starter">

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

</html>

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) {
      StatusBar.styleDefault();
    }
  });
})

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">
    {{item.task}}
  </ion-item>
</ion-list>

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>
  </div>
</ion-header-bar>

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>
  </div>
  <br></br>
  <br></br>
  <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">
        </label>
      </div>
      <button class="button button-block button-positive" type="submit">
        Add Item
      </button>
    </div>
  </form>

</div>
</script>

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 () {
  $scope.modal.show();
};

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

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

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

});

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

Conclusion

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.

CSS Master, 3rd Edition