Getting Started with AngularJS in a Windows 8 JavaScript app

In the past few weeks, I’ve started tinkering with AngularJS, trying to get it to play nicely within the Windows 8 JavaScript application environment. This blog entry is an attempt to document that journey.

I was following Dan Wahlin’s Video Tutorial: AngularJS Fundamentals in 60-ish Minutes, and adapting the exercises to a Windows Store JavaScript app.  First hurdle: right after starting a simple “hello, angular world!” message in default.htm, and hitting F5 in Visual Studio 2012, I immediately got this error as Angular tries to insert its own attributes into the HTML header tag:

Unhandled exception at line 123, column 117 in ms-appx://1af1a67e-6a0b-4170-87a7-60f0e4ca3bc2/Scripts/angular.min.js

0x800c001c - JavaScript runtime error: Unable to add dynamic content. A script attempted to inject dynamic content, or elements previously modified dynamically, that might be unsafe. For example, using the innerHTML property to add script or malformed HTML will generate this exception. Use the toStaticHTML method to filter dynamic content, or explicitly create elements and attributes with a method such as createElement.  For more information, see …

After some digging around the web, I learned that this is a fairly common problem that people run into when using an external JavaScript framework other than the WinJS core library.

Found blog entries by Jonathan Channon and Lukas Ruebbelke who wrote about a solution which used jquery-win8, which was based on jquery-1.8.2 and has been discontinued, apparently because someone claimed that JQuery 2.0 is now compatible with Win8 (?). However, my “hello world” app uses jQuery 2.0.2 with Angular 1.1.7 and it still has the problem.

So the problem is not so much in Angular, but rather in JQuery, and this net.tuts+ article explains why: Building Windows Store Applications With jQuery 2.0.

David Müller of Incloud wrote some helpful step-by-step instruction on how to hack the jQuery source to make it Windows 8 ready: Windows 8 – Using jQuery for app development, which involves judiciously wrapping  DOM manipulation functions around MSApp.execUnsafeLocalFunction() calls. And that’s sort of the basis that allowed me to get my sample app to work. Here is a diff snapshot of the mods I’ve made:

For what it’s worth, I’ve posted the source code on my GitHub repository. I suspect that as I build out more functionality into my application, there will be more places which need execUnsafeLocalFunction(). We shall see.

A couple of issues/concerns arose which will have to be investigated in a follow-up exercise. First, I’m not very happy about having to perform surgery on jQuery and would have preferred a more OO (non-invasive) approach. Secondly, I’m  uncomfortable about having to add MSApp.execUnsafeLocalFunction() wrappers around the relevant DOM manipulation methods. Could this potentially make my app vulnerable to script injection attacks? More to come later…