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.
So here is a walk through for getting started with Ionic in VSCordova, along with the "gotchas" for Windows apps:
- First note that these steps are for CTP3 of VSCordova! Future releases will likely fix some of the issues presented here.
- Create a new Blank App (Apache Cordova) project:
- Install Ionic. Here we will use Nuget, but in the future you will likely be able to use Bower for JS packages.
- Select Tools / NuGet Package Manager / Package Manager Console
- type in:
- be patient, this takes a bit
- From the NuGet prompt, type in:
Inside each of the four partials above, create an ionic view and add some content inside (it doesn't matter what, be creative)... and set the view-title to an appropriate string to display in the header.
Error: [$compile:tplrt] Template for directive 'ionTabNav' must have exactly one root element.
This error in CTP3 is due to an issue in winstore-jscompat.js, which is used by the Cordova tooling to wrap security context issues in Win8 Store apps. To fix this problem, open the following file in the project:
... and replace it with the fork provided here: