I recently started assisting on a demo project with my peer in Raleigh, David Crook, where he is building a service that makes it easy to locate and hire nerds (folks like us) to perform programming tasks.

I love using Angular for the front end, and he’s a wizard when it comes to ASP.NET MVC and Web API, so we thought “Let’s combine the two.” To make things better, I thought I’d try to add WinJS, which Microsoft recently open sourced. I had used it extensively when I was writing an Xbox One app, so I was already familiar with it, but there are some differences when adding it to a website, instead of adding it to an application.

Grabbing WinJS

The first thing I needed to do was to download the required WinJS files. There are a few ways we can do this. From within Visual Studio, I can download the files from NuGet package manager.

When completed, a WinJS folder should appear in my preject’s directory. It includes the relevent CSS, JS, and fonts.

 

Alternatively, I can head over to https://www.nuget.org/packages/WinJS/ and download the package, then drop it into my project.

 

Including WinJS in your project

You’ve got WinJS, now you need to actually reference it from within your HTML files. There is a holy war about whether or not you should include JS files in the header or the footer, so I’ll just say “include it wherever you see fit.” Generally this can be done by adding the following to your HTML:

    <!-- WinJS references -->
    <link href="/WinJS/css/ui-dark.css" rel="stylesheet" />
    <script src="/WinJS/js/base.min.js"></script>
    <script src="/WinJS/js/ui.min.js"></script>

Using WinJS in your project

The code below illustrates how I use this in my index.html page. I’m just creating a tooltip for a button. When a user hovers over said button, the text ‘Submit your Order’ will appear.
Now I need to have my WinJS code excuted. I know that my HomePageController.js will get executed each time this website loads, so I place my WinJS code in there.  

The key point I want you to focus on here is the function:     WinJS.UI.processAll();

What that does is execute any WinJS code which may appear on that page. In this case, it is only the tooltip I created. That’s all there is to it!

Specifically for Angular

You can find the WinJS / Angular project here. It is described as:

Project to smooth the AngularJS/WinJS interaction, this code is a shim layer which facilitates usage of WinJS UI controls in an Angular Windows application. It achieves this by creating directives for the various controls which allow them to show up in Angular markup.

You can see exactly how I used it above.

Testing WinJS on your own

At any point you can head over to http://try.buildwinjs.com/ and try WinJS and the various controls that we’ve included, all within the browser. This is what I generally do before I add it to a project.

You can also use WinJS within Cordova applications, as demonstrated here: https://github.com/banguero/winjs-cordova-stocks-sample

Additional helpers

Want to use TypeScript instead of JavaScript for your WinJS project? We have that flavor too: https://www.nuget.org/packages/winjs.TypeScript.DefinitelyTyped/

If you are using Azure Mobile Services in your project, then this will come in handy: https://www.nuget.org/packages/WindowsAzure.MobileServices.WinJS/

Project description:

This client library enables client applications to connect to Windows Azure Mobile Services. Mobile Services allows you to develop an app with a scalable and secure backend hosted in Windows Azure. You can incorporate structured storage, user authentication and push notifications in minutes. For more information, check out https://www.windowsazure.com/mobile.

You can find the projet we are currently working, here.

-----------------------
@DaveVoyles

Subscribe to my startup, tech, and game dev newsletter