Ionic

17 Feb 2017 in Getting Started on Ionic

Ionic is the beautiful, free and open source mobile SDK for developing native and progressive web apps with ease.

Installation

$ npm install -g cordova ionic

$ ionic --version
$ cordova -v
$ ionic --help
$ ionic info
cli packages: (C:\dev\node-v8.10.0-win-x64\node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

System:

    Node : v8.10.0
    npm  : 5.6.0
    OS   : Windows 10

Misc:

    backend : legacy

$ ionic

Getting Started

Start a new logic project using ionic start:

$ ionic start --list 
tabs ............... ionic-angular A starting project with a simple tabbed interface
blank .............. ionic-angular A blank starter project
sidemenu ........... ionic-angular A starting project with a side menu with navigation in the content area
super .............. ionic-angular A starting project complete with pre-built pages, providers and best practices for Ionic development.
conference ......... ionic-angular A project that demonstrates a realworld application
tutorial ........... ionic-angular A tutorial based project that goes along with the Ionic documentation
aws ................ ionic-angular AWS Mobile Hub Starter
tabs ............... ionic1 A starting project for Ionic using a simple tabbed interface
blank .............. ionic1 A blank starter project for Ionic
sidemenu ........... ionic1 A starting project for Ionic using a side menu with navigation in the content area
maps ............... ionic1 An Ionic starter project using Google Maps and a side menu

$ ionic start myApp blank 
$ ionic start myApp tabs 
$ ionic start myApp sidemenu 
or
$ ionic start myApp blank --type ionic1

Run your App

Run your app in the browser (great for initial development):

$ ionic serve 
or
$ ionic serve --v1

http://localhost:8100

$ ionic serve --lab
$ ionic serve -c -l 

http://localhost:8100/ionic-lab

Deploy

$ ionic login

$ ionic upload

If you’ve previously created an app on the Dashboard and you want to sync a local project, set the app ID in the ionic.config.json file.

{
  "name": "hint",
  "app_id": "544fbbc9"
}

Run on a device or simulator:

ionic run ios[android,browser]

Share your app with testers, and test on device easily with the Ionic View companion app:

http://view.ionic.io

Add Page

$ ionic g page login

Reference

http://ionic.io
http://ionicframework.com/getting-started/
https://ionicframework.com/docs/
http://blog.jeonghwan.net/2016/08/03/ionic-hello-world.html