Post
Ask Question

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 based navigation)
  • Template Syntax
  • Ionicons
  • Tooling(ionic CLI)
  • Native Look & Feel
  • ES6 and TypeScript etc…

Enough of the introduction!!! Now let’s start with the 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

Ionic

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 the application for a particular platform

    Before running on the 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.


Similar Articles