Using Ionic with Apache Cordova

I wrote several blog posts(Apache Cordova with Angular JS, and Using a Cordova Plugin with Visual Studio) relates to Apache Cordova. In those applications, I used Bootstrap and FontAwesome for user interface designs. This is not wrong since we used Html 5 for hybrid mobile application development using Apache Cordova. However, we need to think again are those UI and icons are the best for a mobile specific application user interface.
Ionic is a framework, which mainly focused on look and feel of mobile applications.
In this post I will explain how to use Ionic for Html 5 hybrid application development. I'm using Visual Studio 2015 preview. I couldn't find any Visual Studio 2015 project templates for Ionic. Therefore, download Ionic from Github. For Visual Studio 2013 you could download Visual Studio Ionic Project Template.
First create a Blank Cordova Application like below.

Add Ionic files into framework folder.

Add Angular JS main module in to app folder.

Add welcomeView.html file like below. The content should write according to ion-view.

Modify index.html file like below. In here I used ion-nav-view which tracks user navigation history.

Run your application. You will see home screen like below.

Now it's time to modify the app for user friendly views. Add menu.html file and content should be like below. In here I used ion-side-menus directive.

Add another html page called, studentListView.html file. Content should be like below. This will show a list of students and I used item avatar css class from Ionic. I wrote a whole list of students. However you can use web api with angular repeat directive.

Modify, app.js file like below. In here I used angular js nested views.

Run your application, You will see a side menu with Home and Student List links.

For a mobile application it's better to have a footer with some icons. Therefore, modify index.html file and add ionic tabs like below.

You will see the footer of application like below.