Windows Phone 81 with WinJS, Angularjs using a WinRT Component in C# (cross language component)

I’m at NDC- Norwegian Developer Conference and this year I have only one session, and I decided to be here all week. Kjersti and Jacob, two of the organizers from Programmutvikling let’s speakers attend workshops for free so this year I was able to take advantage of that and have attended the two-day workshop on Angular.js by Scott Allen.

The application- on Windows Phone

I started of with a node.js application (choice was between asp and node), but was curios how it would be to follow the workshop and the labs using Windows Phone, now that html and js is support in the same manner as in Windows Store Apps. One of my demos for my session on ‘What’s new in Windows Store Apps and Windows Phone’ is on WP and WinJS and uses a Windows Runtime components written in C#. I decided midway through the workshop to combine all the pieces together and here is the end result, with the design customized for ‘modern apps’ (the design is not fluid as I focused on the code so it is what it is he he).

Editing field and validation

Search and sorting

Angular.js works surprisingly well on Windows Phone. I had to make some minor adjustments as you aren’t allowed to add dynamic content due to the sandboxing on this platform (WinRT)- but wrapping certain JavaScript calls in the MSApp.execUnsafeLocalFunction() function lets us do what we want. Of course, modifying angular means we might have some maintenance problems,- it was just a quick hack to get things up and running.

The app uses the WinRT Component to get user credit information, (it’s just a simple C# ,method returning a string- in real life you would of course actually do something), a node service for the data (instructions for setting up the service can be found here). It’s a simple app that uses just one controller and one service. The app lists a few movies, and you can edit movie rating and information with validation. I quite like the example Scott used, and the labs where good and covered Angular well- so make sure you checkout his repo with the labs, and his Angular.js course that should come out on at Pluralsight.com on Friday.

You can download the app I made during the workshop here

I’ll push the app to a repo on GitHub once I have time to clean it up a little bit.

Since I set fixed sizes on anything (yes I did. It was a workshop on Angular not design :) ) you will need the 1080p 5.5inch emulator for WP8.1 to have a somewhat pretty app. I’d rather spend time on learning Angular better than fiddling with the UI at the moment.

Here are some snippets (not complete):

The View