Find On

Recent News

Find On

My first Ionic Framework Hello World App

My first Ionic Framework Hello World App

A new programming language or framework, the first thing you learn to create is the “hello world” application. This app is the most basic app you can make and is your starting point for bigger and better things.

In this article we’ll create the “Hello World” Ionic App, with a couple different variations to get started towards your first Ionic App.

HTML Structure

Let’s start with a very basic blank HTML page. We’ll also include a viewport meta tag for proper scaling and import the ionic.min.css and ionic.bundle.js files in the head tag.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
  </head>
  <body>
	Hello World!
  </body>
</html>

If you load this up in the browser, you’ll see “Hello World!” on the screen… but, this isn’t an Ionic app yet. This is just some text.

App Module

For us to really make this an Ionic App, we need to first register it as an app using the ng-app directive on the body tag and defining the app as a module. We’ll also want to import the Ionic module.

First, let’s modify that body tag.

<body ng-app="ionicApp">

… and define the module in an app.js file.

angular.module('ionicApp', ['ionic']);

Notice the name of the module, app matches the value of the ng-app attribute. Don’t forget to include this script AFTER the Ionic script.

<link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
<script src="app.js"></script>

Using Ionic Directives

Now we officially have an Ionic app, so let’s add some Ionic directives in there.

First, lets add a header bar.

<ion-header-bar class="bar-stable">
	<h1 class="title">Hello World!</h1>
</ion-header-bar>

And then a content area.

<ion-content class="padding">
	<p>Hello World, how are you?</p>
</ion-content>

Now, we have a very basic Ionic app up and running.

Chockalingam