Create a Hello World Project using Ionic2

Hi Guys hope you are doing well so let’s start, ionic2 application using the ionic CLI is very simple to implement it takes maximum five minutes for anyone who has web development experience.  

step1. Installing Ionic

if you have already setup ionic in your windows machine then no problem you can directly start from step2, otherwise, you can install ionic using installation guide of ionic documentation or comment below I will make a Separate tutorial for you.

if you have already installed ionic in your os then you can check that it is working properly or not by using the following command. It will look like this
ionic info
C:\myBlank>ionic info

step2. Creating your first ionic App

Open the command prompt( cmd), choose the directory wherever we want to create our iconic application,
next, run the following command
“ionic start myBlank blank”
A command to create an app called myBlank.

It will create a bunch of file for you, including your first @Page of your app, inside app/pages/home,
which will include the following files:

• 1. home.html: This is main page template for your ionic app.
• 2. home.ts: This is the type script for your page, where the @Page component is defined.
• 3. home.scss: This is the custom css SASS styles for this page.

step3: Modifying a Page

Let’s we are going to modifying our home page template home.html to say “Hello World” in the navbar, and in the content,
for example, lets us see default code.

Ionic Blank

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

<ion-content padding>
 The world is your oyster.
 <p>
 If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
 </p>
</ion-content>

step4: Run your Project
In step4 we’ll run ionic serve to view our app in the browser:

ionic serve






















you can modify according to your need.

<ion-header>
 <ion-navbar>
 <ion-title>
 my first app
 </ion-title>
 </ion-navbar>
</ion-header>

<ion-content padding>
 this is my first app.
 <p>
 hello world
 </p>
</ion-content>

step4: Again Run your Project
In step4 we’ll run ionic serve to view our app in the browser:
ionic serve

Conclusion:

You can create your first ionic project with hello world is very simple and it takes a very short amount of time.
hope you are enjoying my first tutorials.
thank you, everyone.