1. Introduction to Ionic

1. Ionic is a powerful HTML5 SDK that helps you build native-feeling mobile apps using web technologies like HTML, CSS, and Javascript.

2. Ionic is focused mainly on the look and feel, and UI interaction of your app. That means it is not a replacement for PhoneGap or your favorite Javascript framework. Instead, Ionic simply fits in well with these projects in order to simplify one big part of your app: the front end.

3. Ionic currently requires AngularJS in order to work at its full potential. While you can still use the CSS portion of the framework, you'll miss out on powerful UI interactions, gestures, animations, and other things.

4. Use Ionic default look and feel or customize it for your brand. And when you are ready to push to the app stores, compile your app with PhoneGap or Cordova, and you have a native-feeling app that will run on the most popular of platforms.

5. In this tutorial, we are going to compile Ionic Starter Templates with Build.PhoneGap.com (if you do not know Build.PhoneGap.com, read here, https://programming-steps.blogspot.my/2017/05/build-app-with-buildphonegapcom.html ). This tutorial uses Ionic Version 1.

6. Ionic Starter Templates consists of four types; 1)Blank, 2)Side Menu, 3)Tab 4)Tab With Side Menu.

All these starter template sources codes are available at the following GitHub URLs:

6.1. Blank - https://github.com/notarazicom/ionic-101-blank

6.2. Side Menu - https://github.com/notarazicom/ionic-102-sidemenu

6.3. Tab - https://github.com/notarazicom/ionic-103-tab

6.4. Tab With Side Menu - https://github.com/notarazicom/ionic-104-tabwithsidemenu

2. Pull From GitHub Repository

7. Login to your Build.PhoneGap.com account (if you are new to this, read here first). Click Create New App.

8. Copy the Blank Template URL (refer step 6.1) and paste into the GitHub repo box as shown below. Click Pull from .git repository.

9. Upon successful pull process, you will get a new project created with title and description shown below.

10. Click the Ready to build button.

11. Wait for the build process to complete.

The next step is specifically for Android platform.

12. Using your targeted Android Device, browse http://build.phonegap.com website and log into your account using credentials similar to that of step no.7.

13. Upon successful build process, you should be able to see the download button for Android platform (apk file).

14. Tap the apk button, download to your Android device, install and open the app.

You should be able to get the Blank Template app running on your device.

15. Repeat the same steps in order to create the remaining three templates listed in step no. 6.1, 6.2 and 6.3.

3. Try the Ionic Startup Templates Demo on Codepen

The above Ionic Startup Templates are also available on Codepen.io which you could try it out or fork it (to freely experiment with changes without affecting the original project).

The codepen urls for the templates are as follows:

1. Blank - https://codepen.io/notarazicom/pen/brrxMp

2. Side Menu - https://codepen.io/notarazicom/pen/qXXJXW

3. Tab - https://codepen.io/notarazicom/pen/PKKyEm

4. Tab With Side Menu - https://codepen.io/notarazicom/pen/EvvepR