Part 1 explained why we are trying to use Ionic Framework together with Visual Studio Tooling – and add a little Typescript as well. We saw how the default VS Template ran in Ripple Emulator.
Now it’s time to add the Ionic-Angular bundle to our little application. The easiest way to get all you need is via NuGet Package Manager: Open it and search for “Ionic”. Then hit install, which will give you a bunch of scripts.
Open index.html and then, inside your script folder, locate ionic-bundle.js and drag it into your index.html to create a script reference. Do the same for ionic.css inside the content folder.
By doing so we prepared our Visual Studio Cordova application to host a typical Ionic application generated by Ionic tooling
$ ionic start myApp sidemenu
You can do that yourself now, if you’ve got Ionic up and running. The idea would be to run the aforementioned command – but we will only use content from www/js and www/templates to recreate the application. I will describe that process now. You can always get the code from GitHub if you prefer.
So – from file explorer, drag www/templates into your Visual Studio Solution so that it ends up parallel to the existing scripts folder. We want to reuse this completely.
We’re only two steps away from our goal! We just need to add two script files and modify index.html once more.
First, we need to add app.js and controller.js from www/js into our /scripts/app folder. This will give us the navigation setup as well as rudimentary controller support.
Last, we rearrange script references inside index.html and add an ng-app directive alongside the ion-nav-view directive to bootstrap our application.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>MagicBullet</title> <!-- MagicBullet references --> <link href="Content/ionic.css" rel="stylesheet" /> <link href="css/index.css" rel="stylesheet" /> <script src="cordova.js"></script> <script src="scripts/ionic.bundle.js"></script> <script src="scripts/app/index.js"></script> <script src="scripts/app/app.js"></script> <script src="scripts/app/controllers.js"></script> </head> <body ng-app="starter"> <ion-nav-view></ion-nav-view> </body> </html>
Running Ionic application inside Visual Studio
Now just hit F5 to run the application. Ripple emulator will fire up and show you something like this.
Play with it for a little bit. Watch the side menu appear and how it allows you to jump to a different application part. But – see what happens when you click on one of these playlist? You’re being sent to a detail view where there’s no detail presented. No matter which playlist you select, its name is never shown.
Part 3 will change that by introducing an Angular Service – written in Typescript.
So far, this corresponds to commit #2 on the github repository: “Make Ionic sample application run”
Hope that helps