Building a Simple App Using Ionic, an Advanced Mobile App Framework

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:

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.

Frequently Asked Questions (FAQs) about Building a Simple App Using Ionic

What is Ionic and why should I use it for mobile app development?

Ionic is a popular open-source framework used for developing mobile applications. It’s built on AngularJS and Apache Cordova, providing tools and services for developing hybrid mobile apps using web technologies like CSS, HTML5, and Sass. The advantage of using Ionic is that it allows developers to build apps for all major app stores with a single code base. This means you can write one app that runs on both iOS and Android, saving time and resources. Additionally, Ionic offers a rich library of pre-designed components, which makes app development faster and easier.

How does Ionic compare to other mobile app development frameworks?

Ionic stands out from other mobile app development frameworks due to its focus on web technologies and its ability to create hybrid apps. While native app development requires different coding for each platform, Ionic allows for a single codebase that can be used across multiple platforms. This makes it a cost-effective and efficient choice for developers. Moreover, Ionic’s extensive library of pre-designed components and powerful CLI make it a user-friendly option for both beginners and experienced developers.

Can I use Ionic if I’m not familiar with AngularJS?

Yes, you can still use Ionic even if you’re not familiar with AngularJS. While Ionic is built on AngularJS, it also supports other popular frameworks like React and Vue. This means you can choose the framework you’re most comfortable with. However, having a basic understanding of AngularJS can help you leverage the full potential of Ionic.

What are the prerequisites for building an app with Ionic?

Before you start building an app with Ionic, you need to have Node.js and npm installed on your computer. You also need to install the Ionic CLI and Cordova. Basic knowledge of HTML, CSS, and JavaScript is also required. Familiarity with AngularJS, although not necessary, can be beneficial.

How can I test my Ionic app?

Ionic provides several ways to test your app. You can use the Ionic serve command to test your app in the browser. For testing on devices or emulators, you can use the Ionic Cordova commands. Additionally, Ionic also supports end-to-end testing with Protractor and unit testing with Karma and Jasmine.

Can I monetize my Ionic app?

Yes, you can monetize your Ionic app. You can implement in-app purchases, ads, or subscriptions. However, the process of monetizing your app will depend on the app store policies.

How can I ensure the security of my Ionic app?

Ionic provides several security features to protect your app. You can use Cordova plugins to secure your app’s data and communications. Additionally, you can implement authentication and authorization in your app using Ionic Auth Connect.

Can I integrate third-party services in my Ionic app?

Yes, Ionic allows you to integrate third-party services in your app. You can use Cordova plugins to integrate services like Firebase, Google Maps, and social media platforms.

How can I optimize the performance of my Ionic app?

There are several ways to optimize the performance of your Ionic app. You can use lazy loading to improve startup time, use virtual scroll to optimize long lists, and use Ionic’s built-in tools to optimize images and assets.

Can I build a Progressive Web App (PWA) with Ionic?

Yes, you can build a Progressive Web App (PWA) with Ionic. Ionic provides built-in support for building PWAs, allowing you to create an app that can be installed and run on any platform or device.

Building a Simple App Using Ionic, an Advanced App Framework