Ionic Framework Inside a Visual Studio Cordova Application using Typescript Part 2

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.

Part 1 – Tools and a first glance
Part 2 – Ionic meets Visual Studio
Part 3 – Enter Typescript

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.

Nuget-Ionic

 

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.

Next, create an “app” folder inside the scripts folder. This is where our own application logic will live. This step is optional but it helps structuring as NuGet will install the majority of its javascript package contents into the scripts folder. To keep things consistent, also move “index.ts” from /scripts into /scripts/app and update the corresponding reference inside index.html. Notice that the file we moved has extension “.ts” while the reference says “.js”. This is because it’s a typescript file, and Visual Studio will compile it to Javascript later. It’s not there yet, as is cordova.js.

Last steps

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.

Ripple-Ionic

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
.jonas

Advertisements

11 thoughts on “Ionic Framework Inside a Visual Studio Cordova Application using Typescript Part 2

  1. Pingback: Ionic Framework Inside a Visual Studio Cordova Application using Typescript Part 1 | Developing with your head in the clouds

  2. Pingback: Ionic Framework Inside a Visual Studio Cordova Application using Typescript Part 3 | Developing with your head in the clouds

  3. I followed the article but I’m still facing some problems. I’ve copied all the files inside www folder to VS project root directory but It keeps showing errors with this plugin “com.ionic.keyboard”.
    I believe it’s not been recognized by Visual Studio. So how can add this plugin to Visual Studio? This is the error when I debug in Ripple:
    $ionicPlatform.ready(function() { // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard // for form inputs) if(window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); //ERROR HERE } if(window.StatusBar) { // org.apache.cordova.statusbar required StatusBar.styleDefault(); } }); })
    This is the error message: Cannot read property ‘Keyboard’ of undefined
    Can you help me?

    • Hello Thiago,

      that’s true, this will get you into trouble. The thing is – there is no cordova plugin for keyboard for the Desktop platform, so when you’re running this app from Visual Studio (or via ionic serve or Ripple, for that matter), it will not find such a plugin.
      In such a case, I insert a more extensive check before attempting to perform actions on this plugin – my if clause is
      if(window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard)

      That’s useful when window.cordova is present, but the plugins are not.

      Hope that helps

  4. Hi Thanks for the great tutorial!

    Exactly what I was looking for to do a little hello world to try out my first hybrid app.

    Thanks for putting it on GitHub but even better again would have been clear numbered steps in the blog but now I am being fussy:). Excited to dig deeper into this and thanks again you rock.

    • Hi Duncan,

      thanks for your feedback. Next time I will certainly try to provide an easier path to follow along – something that is very important when digging into a topic for the first time.
      Cheers
      Jonas

    • Hello lodisch, thanks a lot. I haven’t tried it with Ionic labs, but since it is an addition to “ionic serve” I would expect it to run just as expected (as long as Typescript has already been compiled to Javascript). Thanks for the pointer.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s