WinJS with AngularJS

Question

I have a lot of angularjs code (written by a colleague) and I'm trying to assess how much of it is re-usable in a Windows 8 Metro (or whatever they decide to rename it) app.

Does anyone know how well angularjs gels with WinJS?

As Windows 8 is still very new and there might not be too many people out there (if any) that have tried using angular to build a Windows 8 app, does anyone have experience trying to use angular with some other framework that requires specific proprietary html attributes (like maybe a Yahoo Connected TV app).

My main concern is that the WinJS proprietary html attributes won't get picked up and acted on properly when content is dynamically inserted into the DOM via angular but I have no idea.

I'm still waiting for my Windows dev box to arrive so I'm just doing research now. If it turns up before anyone answers I'll circle back and share my results.

Towrope

How do you navigate between views? Do you use AngularJS route or WinJS PageControl? – Zeuxis

@Zeuxis I ended up not using AngularJS. The code we had was overly complicated and I was under a deadline. It was faster to just work with the well documented Metro SDK rather than try and crowbar in Angular stuff. N.B. I was asking this Q before Windows 8 had even been released, I'm sure there's more info on using Angular with Metro now. – Towrope

Many thanks. WinJS and AngluarJS have many things in common. Maybe WinJS is enough, and it has better UI animation support. – Zeuxis

Answer 1

Its just a normal HTML platform, which is the same as IE10 interms of capability. There are restrictions on certain direct setting of innerHTML etc, which much pass through toStaticHTML first. However, this can be can worked around.

Note, it's not required to use WinJS to write a HTML5 Win8 application.

Juncaceous

It's a lot of duplication of effort if you don't use WinJS... And in some cases is is required, say to add items to the settings flyout. It also provides a lot of UI and layout components to get a Windows 8 look and feel without my having to hack together all my own CSS to make it look and feel the same. – Towrope

You can use the CSS. I did this in a couple places. Also, everything in WinJS can be done without it... There's no special hooks. It's just JS that may call WinRT for certain things (settings is a great example of that) – Juncaceous

OK, so if I write some angular templates that do the same things with the same classes as the winjs directives would generate everything should work fine without having to write any CSS? – Towrope

Yep. I did this for the appbar button. – Juncaceous

Answer 2

The WinJS.Binding namespace does a lot of what AngularJS does. It uses the data- attributes similar to AngularJS, so it might not be too hard to port the templates from AngularJS to WinJS, although a lot of the backend JavaScript might have to change.

Adornment

I ended up just writing everything in WinJS. I was more interested in using Angular's models and controllers plugged into WinJS views. The views were never going to be cross compatible but I had hope that I'd be able to re-use a lot of business logic. – Towrope

Answer 3

Check out this library: https://github.com/codemonkeychris/angular-winjs, it helps you use WinJS UI controls with AngularJS. In the test app readme it talks about what you need to do to get Angular up and running in the Windows 8 enviornment.

Pustulant

Answer 4

This blog (http://onehungrymind.com/windows-8-and-angularjs/) appears to solve this problem, though I think there may be side-effects that still have to be worked through.

Bibcock

Answer 5

While we can use Angular with WinJS seamlessly (except the little jquery and appendto issue), the key would be how to use winJS controls within angularJS. I believe we will end up writing directives for using WinJS controls in angular project (like typically we do for jquery widgets). In my mind we need to use winjs controls as they follow win8 standards and look and feel. Other question would be which navigation framework to use - and I think the answer would be angularJS because of it's simplicity and power:) On the other hand WinJS have rich indexedDB, localstorage capabilities in built which probably we can re-use in angular. In short, I see both can work together as complimentary to each other.

Breana