Create project from existing code | Cordova, PhoneGap, Ionic, Visual Studio

When I start a new Cordova or Ionic project I normally start from the command line. I initialize the project and add some platforms and packages I need to use in my project. I sometimes start coding from VSCode, but there will be a point where I’d like to switch to Visual Studio, the full version. Until recently I started by creating a new project and move the existing code and config files into that. That was until I came across this awesome feature in Visual Studio: “Create New Project From Existing Code Files”. I don’t know when it was added, but I somehow missed it.

Here’s how it works.

Import existing project

I assume you already have an existing piece of code you want to move over to a Visual Studio project. To get it into Visual Studio the easy way, go to File –> New in the menu and select, “Project From Existing Code…”


In the dialog that appears make sure “Apache Cordova” is selected in the dropdown list and hit the “Next >” button.


On the next dialog screen you have to navigate to the folder in which you Cordova project is. You also have to give your project a name. Hit “Finish” after that to close the dialog and start the creation of the project. This may take a few seconds.


After the project is imported you’ll end up with a solution similar to the one in the image below.


From this point on you can use Visual Studio to work on your Cordova, or Ionic, project.


Debugging AngularJS in Visual Studio 2015

While working on the Cordova Drum Machine I’m currently streaming live at, I ran into a few issues with Visual Studio debugger. Normally I debug my ‘normal’ AngularJS web applications inside Chrome using an extension on the debug tools that shows the context of the selected HTML element. In Visual Studio I do not have these tools available. Here’s how to get information on the Angular context of a selected element.


The first thing that’s really useful to gain insight to is the Angular scope. The scope has to be read from a specific DOM element. To select an element from your app (in my case I’m running my Cordova app as a UWP app on the Windows desktop), click the ‘select element’ button in Visual Studio and pick the element from your app. In the screenshot below I’ve selected a group of radio buttons from which I’d like to view the current scope.


Visual Studio will highlight the DOM element that is selected.

Now we’ll have a look at the JavaScript Console inside Visual Studio. If you type $0 in there and hit enter, the JavaScript Console will prompt the highlighted element. We need this to get the current Angular Scope. The easiest way to get the Angular Scope is by using the angular.element function on the selected element and call the _scope _function on the result. Like so:

var s = angular.element($0).scope()

At this point the ‘s’ variable contains the entire scope. You’re probably interested in some properties of that.


In my drum machine I only added a property ‘vm’ to my scope that contains the viewmodel. In my case I used this code to debug and find out what the scope contained at for the selected elements.


Alternatively you might be interested in the controller that is used at the DOM element you have selected. The code to get access to the current controller is very similar to that of the scope. But instead of calling the scope function you have to call the controller function.

var c = angular.element($0).controller()

When evaluating the ‘c’ variable in the console we get to see what’s inside the current controller.


You can look at the current state of all properties inside the controller and even call function on there.


Since there is no specific tooling inside Visual Studio 2015 that help you to debug and explore AngularJS inside your application, these functions might help you getting some insights of your app. I would suggest to have a look at the other properties in the result of angular.element($0).


Enable onscreen keyboard in VS Android Emulator

By default, the Visual Studio Android emulator sets its keyboard entry to the hardware keyboard attached to you PC. But it might be very useful when developing apps to work with the software keyboard on Android. In the Windows Phone emulator, you can use a page-up and page-down to enable and disable the keyboard. In the Android emulator you’ll have to change a setting in the OS itself.

To change the setting, got to the Android Settings and to Language & Input. Than select “Change Keyboard”.

Hit the switch to change the input method.

You’re good to go: