Quick start your mobile app with Ionic

1. Prepare environment
Read here to install ionic tools. Below is summary
+Install Note.js 4 (Note.js 5 doesn't work)
+Install Ionic by command: $ npm install -g cordova ionic
+Install Ionic lab
+Install bower by command: $ npm install -g bower
+Install VS Code

2. Start a project
2.1 Use command line:
You can create a project with a template as the following:
$ ionic start <<app>>  <<template>>

In which:
<<app>>: your app name
<<template>>: a template of ionic, it can be:

• blank: blank project
• maps: project using Google Maps and a side menu
• tabs: project using a simple tabbed interface
• sidemenu: project using a side menu with navigation in the content area
• salesforce: project using for Salesforce
• tests: a test project with different kinds of page navigation
• complex-list: project using a complex list

2.2 Use Ionic Creator
Let signup an account on Ionic Creator, then create an app.

After designing your app, click cloud icon to export the code:

There are some ways to export the code as above screen. I prefer IONIC CLI export. When you go there, you will see a command line for you getting code from Ionic Creator to your local pc. Let copy the second command, for example:
$ ionic start [appName] creator:xxxxxxxx

Let replace [appName] by your app name wanted.You may be required to login, key:
$ ionic login
Then provide your user name and password to login Ionic Creator.

3. Edit, run and debug
To open the code in Visual Studio Code (VSC), go to the folder created by the command in step 2. (above), then right click select Open with Code (Windows PC) OR open VSC then open the created folder on Mac or Linux.

A Ionic project will have a structure like below:

+www: main folder containing source code

+www/index.html: index html file where the code start

+js: JavaScript folder

+js/app.js: Ionic Starter App (angular starter module)

+js/router.js: AngularUI Router

+templates: folder containing html templates

Open a html template, you can see many ion- elements, for example <ion-view>. These are custom directives that are part of the Ionic Framework and these directives allow AngularJS to attach behaviour to them. Read more about the Ionic custom directives in the API documentation.

To run your app on the browser, in the folder of your app, run the command:
$ ionic serve

To see what it looks like on iOS and Android, use command:
$ ionic serve --lab

Another way is you can use Ionic Lab application to load your app then run and see.

Ionic Lab basically is built on top of Chrome which supports LiveReload. So it can help you run and debug your app.

Hope this article can help you start coding with ionic.
Any comment is welcome!