How do you get Angular.js to work in a Windows 8 store app?

Question

The app runs but Angular data objects are not recognized.

Here is the JavaScript error I am getting:

Exception was thrown at line 1059, column 11 in ms-appx://28934b41-4dd2-4414-b9a9-
a73c11c1b743/js/angular.js
0x800a139e - JavaScript runtime error: No module: ngLocale
Exception was thrown at line 4473, column 9 in ms-appx://28934b41-4dd2-4414-b9a9-
a73c11c1b743/js/angular.js
0x800a139e - JavaScript runtime error: HierarchyRequestError
The program '[5112] WWAHost.exe' has exited with code 1 (0x1).

Here is the function around line 1059 in angular.js:

return ensure(modules, name, function() {
    if (!requires) {
      throw Error('No module: ' + name);
    }

And here is the function around line 4473:

 if (parent) {
    parent.replaceChild(newNode, oldNode);
  }

I was able to fix the first error that I came across:

Unhandled exception at line 2031
 JavaScript runtime error: Unable to add dynamic content

by wrapping all of angular.js with MSApp.execUnsafeLocalFunction

  MSApp.execUnsafeLocalFunction(function () {
          ....
      });   

These errors are from a test app that I created following the todo list example from the Angular.js homepage.

Now what? According to a free Microsoft Event I attended, "It is easy to add any third party JavaScript framework/library to a Windows 8 app!" I may be new to this...but I don't think this is very easy!

Is it even possible to use Angular.js with a Windows 8 app?

Answer 1

The reason is because Angular puts html comment <!-- --> tags for ng-repeat and similar directives. Unfortunately Microsoft considers these to be unsafe when put in from Javascript using .innertHTML and is not allowed. This can be found here:

http://msdn.microsoft.com/en-us/library/windows/apps/hh465388.aspx

It happens at line 1534 in jQLite:

var div = document.createElement('div');
            // Read about the NoScope elements here:
            // http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx
            div.innerHTML = '<div>&#160;</div>' + element; // IE insanity to make NoScope elements work!
            div.removeChild(div.firstChild); // remove the superfluous div

What happens is the element is

<!-- ngRepeat: item in arrayTest -->

Then when angular does div.innerHTML = ... the element gets removed. If you put a break point at div.removeChild, you will notice the div.innerHTML is without the element.

[EDIT] After writing this response I tried adding

MSApp.execUnsafeLocalFunction(function () { div.innerHTML = '<div>&#160;</div>' + element });

It works! Apparently you have to wrap all of angularjs in MSApp.execUnsafeLocalFunction and then that line specifically.