1.6 KiB

Raw Blame History

title
Hello World In Ionic

Hello World in Ionic !!

This is the editorial which will go through you for making a simlple Hello World program in Ionic.

Steps

1. 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

2. Create a folder named `helloworld`

ionic start helloworld blank

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

3. Change directory to `helloworld` [ this is your ionic directory]

cd helloworld

4. Open the folder in your text editor . you will see various files and subfolder .

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

5. 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.

6. Delete the template and add the html syntax as shown in image.

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

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

7. Save the code and run

ionic serve

1.6 KiB Raw Blame History