Ionic Framework Hello World – Code Example

Why Ionic Framework?

When you have frameworks like Cordova/PhoneGap or Titanium, why need Ionic in the first place? Well, as I get started with some of these frameworks and got done with Hello World program and wanted to do more, I decided on getting myself expert at developing hybrid apps. The primary reason being the fact that it would require me to know HTML, CSS & Javascript and create cross-platform mobile apps in easy manner without knowing native programming details.

That said, as I started on hybrid apps, I got stuck at following question as using bootstrap to develop UIs for my hybrid apps was not serving the purpose.

• How do I design native looking UIs for my hybrid apps?
• Is there something as cool as Bootstrap for developing hybrid apps?

I am big fan of Bootstrap framework for Web UI. Its just so powerful and helpful for developing Web UI. However, as I looked on into it, I could not find CSS elements (classes) which would help me to develop native device looking UIs.

This is when I discovered Ionic framework.

So, Why did I decide to choose Ionic framework for next set of hybrid apps?

• It is FREE.
• It is based on existing and very popular hybrid framework, Cordova.
• It makes use of AngularJS that helps you to create your apps in a quick manner.
• It has some good samples on their website which I could copy and paste and get my apps done very fast.

Pre-requisite for Good Fun with Ionic

If you wanted to get on board with Ionic quickly and start having fun creating/developing your next hybrid apps, you may want to learn/have decent knowledge of following:

• Apache Cordova / Phonegap framework for creating hybrid apps
• AngularJS

I am glad that I had a good knowledge of both of above, and it took me know time to get started with Ionic. For that matter, knowing what Angular could achieve, I am excited that I shall be able to develop some real cool hybrid apps in near future with Ionic framework.

Ionic Framework Installation

You may want to follow instructions on following pages:

http://ionicframework.com/getting-started/

Following are some key softwares/tools that you may need to install/configure for a smooth sail with ionic framework installation:

• Download and install Node.js
• Download and install Git Client. Set the bin folder of GIT in your path variable.
• Download and setup Ant. As part of setup, define ANT_HOME as path variable and include %ANT_HOME%\bin in the path.
• Install Cordova CLI. Well, this would get done as part of instructions of installing ionic, anyway.
• Install one or more platform SDK. For me, I got started with android and thus, installed android SDK. As part of setup, create ANDROID_HOME environment variable and include %ANDROID_HOME%\platform-tools.

Ionic Starter Projects

If you want to get started with a template project, get hold of ionic base project. For every new project, you could get this installed and get started in a quick manner. The project does contain all dependencies that one may need to get started. Follow the instruction on the above page and get your base project from where you could start developing your apps. You could also follow the instruction below to get started with ionic template project.

• Download zip file from ionic base project. Unzip it.
• Copy and paste the files/folders from ionic-app-base-master project to your desired folder. If you are working with Eclipse IDE, create an empty project and import the files into the project.
• Using command line window, Go into that folder and execute following command:
  • npm install -g cordoba ionic gulp
  • npm install
  • gulp install
• Execute the command, cordova platform add <platforms> where platforms can be “android”
• Execute ionic add android to run the app on ionic emulator or connected device

Hello World Code Example

After you have installed ionic base project, do the following:

app.js: Write controller code such as following in js/app.js. Append the following code to the existing code

.controller( "HelloCtrl", [ '$scope', function( $scope ) {
  $scope.firstname = ''; 
 }])

Thus, the overall code in app.js would look like following:

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

.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) {
      // Set the statusbar to use the default style, tweak this to
      // remove the status bar on iOS or change it to use white instead of dark colors.
      StatusBar.styleDefault();
    }
  });
})
.controller( "HelloCtrl", [ '$scope', function( $scope ) {
  $scope.firstname = ''; 
 }])

index.html: Write following in index.html in between ion-content tag.

<div class="list" ng-controller="HelloCtrl">
  <label class="item item-input"> <input type="text"
   placeholder="Type Your Name" ng-model="firstname">
  </label>
  <h2>Hello, {{firstname}}</h2>
 </div>