Wednesday, April 29, 2015

Using Ionic with Visual Studio Tools for Apache Cordova

Ionic has been gaining in popularity as a free and open source mobile development framework. It leverages AngularJS and SASS to provide a quick start to mobile development for iOS, Android and Windows.

The newly released RC of Visual Studio 2015 Tools for Apache Cordova (VS TACO) makes it easier to create Ionic apps using two different methods.

Method 1: Using the Ionic Templates for TACO

The easiest way (but not the best way) to create a new Ionic project using VS TACO is to use the new Ionic project templates, which are available on the Visual Studio Gallery.

However, there are currently some issues with using the template method:
  • at the time of this writing, the templates do not work with Windows Phone and Windows apps.
  • you are not guaranteed to get the latest Ionic CLI output when using the templates.
  • not all of the Ionic CLI templates are included in the VS Templates.
If any of these are issues for you, then continue to Method 2 below!



Method 2: Importing an Ionic Project

This second method involves creating an Ionic project at the command line, and then importing the source into a VS TACO solution. The advantage of using this method is that you will be sure to have the latest Ionic template source, and you have full control over what you bring into your project.

  1. Be sure you have ionic installed - you can install by typing the following at the command line.

    npm install -g cordova ionic
  2. Now, use Ionic to create a starter project. Ionic supports three different templates: blank, tabs, and sidemenu. To create the tabs template:

    ionic start myApp tabs

    NOTE: instead of tabs in the command above, you can also select blank or sidemenu.
  3. Next, create a Visual Studio 2015 TACO solution using the Blank App template:

  4. From the Visual Studio TACO solution you just created, select the following files and folders:


    ... and copy them to the "myApp" folder that you created using Ionic in Step 2.
  5. Open the myApp.jsproj file from the Ionic folder. Select "Save All" so that a new Solution (.sln) file is created for this project.
  6. Open index.html and add a reference to platformOverrides, which allows dynamic elements to work in Windows and Windows 8 apps:

    <script src="scripts/platformOverrides.js"></script>

    (if you are curious where this file is coming from, look in the merges/windows/scripts subfolder)
  7. At this point, you can run your Ionic app against Android, iOS, and Windows. Go ahead and try it! Note that Ionic does not _fully_ support Windows and Windows Phone platforms, but the Ionic team is working on getting full compatibility with Windows platforms.
  8. For Windows Phone 8.1 support (Windows Phone (Universal)), you will need to make one more tweak: add the following two nodes to config.xml:

    <preference name="windows-target-version" value="8.1" />
    <preference name="windows-phone-target-version" value="8.1" />