How install Ionic and develop first Ionic application || What is Ionic Framework || Ionic Framework Tutorial

How Install Ionic: 

Before proceeding we must have to download and install node.js (recommended for most users), make sure the latest version of Node.js and npm are installed.

To check version, type on command prompt. 

node --version
npm--version

Install the Ionic CLI(Command Line Interface)

$ npm install -g ionic  // write on command prompt

g here stands for globally and  npm - node package manager. All required packages are downloaded to the system. 

What is ionic CLI?

The Ionic CLI is built with TypeScript and Node.js.

CLI is a inbuilt tool provide interface to developer such as installing and updating Ionic, the CLI comes with a built-in

development server, build and debugging tools, and much more.

Start an App:

Ionic provide two default template or starter tabs and sidemenu.We can use blank for fresh blank project.

Create an Ionic app using one of the pre-made app templates, or a blank one to start fresh. The three most common starters are the blank starter, tabs starter, and sidemenu starter. Get started with the ionic start command:

=> Create a folder named it something like IonicProject in which all project will be created

=> Now open command prompt and navigate to the folder IonicProject by 

C:\Users\USERNAME>cd IonicProject

C:\Users\USERNAME\IonicProject>ionic start myApplication blank

It will take some time to extract project files to IonicProject folder.

After completing navigate to myApplication folder and run the project using: ionic serve

C:\Users\USERNAME\IonicProject\myApplication>ionic serve

The project will be open in browser and will show the home page content.
project file can be open in sublime text by dragging to sublime text editor or go to file->open folder (the project folder).

Let see some snapshot to understand the folder structure and their purpose.

Folder structure of ionic:

Folder structure of ionic: 

Filepath	Description
./src/	In src directory resides our code. This is where most of the work for an Ionic app will take place. When we run ionic serve, our code inside of src/ is transpiled into the low level machine language that the browser understands. Every app has a root module that essentially controls the rest of the application. This is very similar to ng-app from Ionic 1 and AngularJS. This is also where we bootstrap our app using ionicBootstrap.
./src/index.html	This is the main entry point for the app, though its purpose is to set up scripts, CSS includes, and bootstrap, or start running our app.
src/app/app.module.ts	It is the entry point for our app.We see this class on top of the file where we’re setting the root component to MyApplication @NgModule({   declarations: [MyApp, HelloIonicPage, ItemDetailsPage, ListPage],   imports: [BrowserModule, IonicModule.forRoot(MyApp)],   bootstrap: [IonicApp],   entryComponents: [MyApp, HelloIonicPage, ItemDetailsPage, ListPage],   providers: [StatusBar, SplashScreen, {provide: ErrorHandler, useClass: IonicErrorHandler}] }) export class AppModule {}
./src/app/app.html	In this template, we set up an ion-menu to function as a side menu, and then an ion-nav component to act as the main content area.
src/app/app.component.ts	This is the first component that gets loaded in our app, and typically we can specify here which page is to be first page or loaded into.
src/app/app-routing-module.ts	In this page we set up the path for routing pages.
src/app/assets	In assets folder we can have images or any different format files folder.
src/app/global.scss	Global variables provides in order to make theming an entire application easier.