In almost every case of learning 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.
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.bundle.js files in the head tag.
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.
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.
… and define the module in an
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.
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.
And then a content area.
Now, we have a very basic Ionic app up and running.