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…”

FileNew

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

CreateProject

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.

FolderNameProject

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

solution

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 LiveCoding.tv/sorskoot, 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.

Scope

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.

selectElement

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.

vm

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.

Controller

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.

controller

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

Wrap

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