In this two part tutorial series, we'll learn how to create a mobile Expense Tracker app using Wijmo 5 and the Ionic Framework. In part 1, we'll start off slow by learning what Ionic is, how to create a mobile project with Ionic, and how to incorporate Wijmo 5 in the project. In part 2, we'll learn how to create some of the most important parts of the existing Expense Tracker app (soon to be) included with the Wijmo 5 download.
What is Ionic?
Simply put, Ionic is an HTML5 development framework for creating hybrid mobile apps. Ionic includes a series of CSS styles that emulate the look and feel of native mobile components. Ionic also uses AngularJS for a great deal of its core functionality, and also includes several directives to make the development experience even better. Lastly, Ionic uses Apache Cordova to run as a native app on mobile devices, and its creators have also developed ngCordova, a set of AngularJS extensions for the Cordova API. It is very important to mention that Ionic is still in beta (version 11 at the time of this writing) and currently supports iOS6+ and Android 4.1+ only. Ionic does have plans to support Windows devices, but has absolutely no intention of supporting older platforms.
Prerequisites
To follow along with this tutorial series, we'll need to install the following dependencies first:
While we’ll be using Chrome to view the sample application throughout this tutorial, you may also want to run the application on your Android or iOS device. For more information on configuring the appropriate SDK, please see the Cordova Platform Guide for you platform of choice.
Getting Started
With all of the prerequisites out of the way, the first thing that we need to do is install the Ionic CLI. To install the Ionic CLI, we’ll run the following command: On Windows:
npm install --g ionic
Linux and Mac:
sudo npm install --g ionic
Now to actually create the project, we'll issue the following command:
ionic start ExpenseTracker blank && cd ExpenseTracker
This command will create an Ionic project named "ExpenseTracker" using Ionic's "blank" project template, and then enter the newly created project directory. Before we finish adding the project's dependencies, let's see what we’ve created so far by running the following command from our project's root directory:
ionic serve
This command will start a development web server and load the application in your default browser. While the development server is running, any changes we make to our project's source files will be immediately reflected in our browser(s) without having to manually refresh the page, which is quite handy. We should now see the following in your browser:
To stop the web server, type Ctrl+C twice in command line. Next we'll manually add the Wijmo5 source code to our project, which we can download from here. To do so, we'll create a folder named wijmo under the project's www/lib directory and copy the controls, interop, and styles folders from the Wijmo download's Dist folder. The www/lib directory will contain all of the project's front-end dependencies for our app – those added by Bower and those added manually. W
hen finished, our www/lib folder should look similar to the following:
Note we can add the Wijmo source anywhere we'd like, as long as it is within the www directory. For organizational purposes, we'll keep Wijmo with the rest of our front-end dependencies. Now that we have all of the project's dependencies installed, let's open the project in our favorite text editor or IDE and reference jQuery and Wijmo in index.html which is found under the www directory:
<!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>Expense Tracker | Wijmo 5</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<!-- Wijmo CSS -->
<link href="lib/wijmo/styles/wijmo.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- jQuery - load this script before Angular -->
<script src="lib/jQuery/dist/jquery.min.js"></script>
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- Wijmo Scripts -->
<script src="lib/wijmo/controls/wijmo.min.js"></script>
<script src="lib/wijmo/controls/wijmo.input.min.js"></script>
<script src="lib/wijmo/controls/wijmo.grid.min.js"></script>
<script src="lib/wijmo/controls/wijmo.chart.min.js"></script>
<script src="lib/wijmo/interop/angular/wijmo.angular.min.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">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content class="padding">
</ion-content>
</ion-pane>
</body>
</html>
Notice that index.html doesn't directly reference AngularJS – Ionic includes AngularJS and its other dependencies (ex. UI-Router) along with its own code in ionic.bundle.js.
Using Wijmo
The last thing that we'll do in this tutorial is add a Wijmo 5 control to index.html. To do so, we'll first need to tell Angular about Wijmo. Let's add the Wijmo to our main Angular module's list of dependencies on line 6 of www/js/app.js:
angular.module('starter', ['ionic', 'wj'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
Now if we look at our <body> element in index.html, we'll see two AngularJS directives from Ionic, <ion-pane>, <ion-header-bar>, and <ion-content>. The <ion-pane> directive is just a simple container designed to fit the content, and the <ion-header-bar> directive adds a header to the page. The <ion-content> directive serves as our content area and uses Ionic's custom scroll view implementation by default, though it also supports native scrolling as well. Let's add and configure a Wijmo InputNumber control in the <ion-content> directive:
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content class="padding">
<wj-input-number value="0" step="1" min="-5" max="5"></wj-input-number>
</ion-content>
</ion-pane>
If we run the project now, we should see a Wijmo InputNumber control with a default value of zero and the plus/minus spinners. 
That's it, we've added a Wijmo directive to our Ionic project!
Summary
In this post, we've created a barebones Ionic project and added a Wijmo InputNumber control to the page. In part 2, we'll create the Expense Tracker sample that can be found on the Wijmo site.
MESCIUS inc.