¿Cómo haces que Angular.js funcione en una aplicación de la tienda de Windows 8?

Question

La aplicación se ejecuta pero los objetos de datos angulares no se reconocen.

Aquí está el error de JavaScript que estoy recibiendo:

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). 

Aquí es la función alrededor de la línea 1059 en angularjs:

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

Y aquí es la función alrededor de la línea 4473:

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

Pude solucionar el primer error que encontré:

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

envolviendo todos angularjs con MSApp.execUnsafeLocalFunction

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

Estos errores son de una aplicación de prueba que he creado siguiendo el ejemplo de lista de tareas desde la página principal angularjs.

¿Ahora qué? De acuerdo con un evento gratuito de Microsoft al que asistí, "¡es fácil agregar cualquier framework/biblioteca de JavaScript a una aplicación de Windows 8!" Puedo ser nuevo en esto ... ¡pero no creo que esto sea muy fácil!

¿Es posible utilizar Angular.js con una aplicación de Windows 8?

Answer 1

La razón es porque Angular pone html comment <!-- --> etiquetas para ng-repeat y directivas similares. Desafortunadamente, Microsoft considera que no es seguro cuando se lo coloca desde Javascript con .innertHTML y no está permitido. Esto se puede encontrar aquí:

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

Sucede en línea 1534 en 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 

Lo que pasa es que el elemento es

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

Luego, cuando un ángulo que div.innerHTML = ... el elemento se elimina. Si pones un punto de quiebre en div.removeChild, verás que div.innerHTML está sin el elemento.

[EDIT] Después de escribir esta respuesta He intentado añadir

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

Funciona! Aparentemente debes envolver todos los angularjs en MSApp.execUnsafeLocalFunction y luego en esa línea específicamente.

Answer 2

en mi caso me envolvió con AngularJS MSApp.execUnsafeLocalFunction y sólo utiliza los datos-ng-repetición en lugar de repetir ng-

Answer 3

Lo tengo trabajo mediante la adición de ng-csp a la etiqueta HTML en mi tienda de aplicaciones. Esto habilita la Política de seguridad de contenido, que desactiva cosas como 'eval'. Usé jQuery (v2.1.1) y Angular (v1.3.0-beta.13).

Más sobre ng-csp en el AngularJS documentation.