a blog for those who code

Thursday, 17 September 2015

Getting Started with Ionic Framework in Visual Studio 2015

In this post we are going to show how to get started with Ionic Framework in Visual Studio 2015. In my previous post I have discussed about Installing Tools for Apache Cordova in Visual Studio 2015 which is actually a first step to get started with Ionic Framework in Visual Studio 2015.

Ionic is a hybrid application that uses Angular.js to build cross platform hybrid apps. It sits on top of Apache Cordova and provides standard set of controls for building hybrid applications. As I have already mentioned the first step to get started with Ionic Framework is to install Apache Cordova in Visual Studio.

Now to start with Ionic Framework, you can use Ionic Template in Visual Studio 2015. The makers of Ionic have published some handy templates for use in Visual Studio. In the New Project screen go to Templates and then JavaScript and click on Apache Cordova Apps. You will see something like below, click on Ionic Tabs App and give the project name as MyFirstIonicApp.


On click of OK, a new solution will be created for you whose contents will be something like below. Where we have pre-installed icons and screens of android, ios, windows and wp8. Along with that we have a config.xml file which is the place for all the configuration for your App. Here you can configure the plugins, platforms or any other configuration related to Windows, Android or iOS.

As you can see below we have Android, iOS, Windows Phone (Universal), Windows 8, Windows-AnyCPU, Windows-ARM, Windows-x64, Windows-x84 platforms in which we can run our application.


Now we are going to run our application using Android Platform and Ripple Nexus (Galaxy). Ripple Emulator is the easiest emulator to use which brings up the ionic app in your browser. The output of the application which we have just created will be something like below.


That's it for the introduction of Ionic Framework in Visual Studio 2015, in our next post we will be using the plugins in our Ionic application. Please Like and Share CodingDefined.com Blog, if you find it interesting and helpful.

No comments:

Post a Comment