Getting Started With Ionic 2

Ionic2 provides a platform to web developers to build great mobile apps and Progressive Web Apps in a way that feels just like building websites. That means the standard HTML, CSS, and JavaScript you are using to build a website will help you turn it into mobile magic.

Benefits of Ionic2 are as follows:

• Cross platform mobile development framework
• Angular 2 powered
• Write once, deploy on different platforms
• Runs on browser and devices
• Debug on browser
• Navigation like native(Push & Pop,no url base navigation)
• Template Synatax
• Ionicons
• Tooling(ionic CLI)
• Native Look & Feel
• ES6 and Type Script etc…

Enough of  the introduction!!! Now let’s start with installation.

Step 1

Download and install node.js.

Step 2

Install cordova ( a framework that enables development for cross patform apps with HTML, CSS and JavaScript)

npm install -g cordova (mac/linux user write sudo)

Step 3

Install Ionic CLI (This installs the Ionic Command Line Interface into your workstation.)

npm install -g ionic

To check the details of your installed ionic, simply run

ionic info

Step 4

Install Typescript (TypeScript is a superset of JavaScript, and works really well with Angular 2).

npm install -g typescript

Step 5

Create ionic 2 application

ionic start myfirstapp –v2 (tab application)

Or for tutorial project

ionic start myfirstapp tutorial –v2 (side menu application)

here –v2 specifies the ionic version 2

–v1 for ionic 1

You can get a list of available templates by simply writing

ionic start –list

Step 6

Run the application,first navigate to your working directory then,

ionic serve
or
ionic serve -l



List Of Ionic2 CLI commands which might be useful when building the application

1. Add new Page
   
   ionic generate page nameofthepage
   
   
2. Add new Platform like android and ios
   
   ionic platform add android
   ionic platform add ios
   ionic platform add windows
   ionic platform add browser
   
   
3. Build application for particular platform
   
   Before running on device you must configure Android studio for Android application
   
   ionic build android
   
   To build for ios, you need to be using MacOs and have xCode installed. You also need two node modules installed globally. They just help in building and deploying the app.
   
   npm install -g ios-deploy
   npm install -g ios-sim version
   ionic build ios
   
   
4. Run application on devices
   
   ionic run andorid
   ionic run ios

I hope you found this post helpful.Thank you for reading.