How to Write "Hello, World!" in Ionic

This guide will teach you how to write a simple Hello World program in Ionic.

Step 1: installation

Install ionic, npm ,angular and cordova if not installed. [See first introduction for more information.]

sudo apt-get install nodejs
sudo apt-get install npm 
sudo npm install -g ionic cordova

Step 2: Create a folder named helloworld

ionic start helloworld blank

Note: Since this is a small project, enter No or N when prompted during program execution.

Step 3: Change directory to helloworld [this is your ionic directory]

cd helloworld

Step 4: Open the folder in your text editor .

You will see various files and subfolders.

Don't panic – these files are generated automatically by npm for you. Just go to src->page->home->home.html .

Basic File Format

`home.html` is the html page where you can write html syntax.<br/>

`home.scss` is the css page to write css syntax.<br/>

`home.ts` is the typescript page to write typescript code.

Step 6: Delete the template and add the html syntax as shown below

 <ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Project
    </ion-title>
   </ion-navbar>
  </ion-header>

  <ion-content padding>
   <h2>Hello World </h2>
  </ion-content>

Step 7: Save the code and run

ionic serve

To see your code running go to the browser and and open localhost:8100 in the URL. That's it!