如何让 Angular.js 在 Windows 8 商店应用程序中工作？答案

【问题标题】：How do you get Angular.js to work in a Windows 8 store app?如何让 Angular.js 在 Windows 8 商店应用程序中工作？
【发布时间】：2012-09-29 07:59:21
【问题描述】：

应用程序运行但 Angular 数据对象无法识别。

这是我得到的 JavaScript 错误：

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

这是 angular.js 中第 1059 行附近的函数：

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

这是第 4473 行附近的函数：

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

我能够修复遇到的第一个错误：

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

通过使用 MSApp.execUnsafeLocalFunction 包装所有 angular.js

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

这些错误来自我按照 Angular.js 主页中的待办事项列表示例创建的测试应用程序。

现在呢？根据我参加的免费 Microsoft 活动，“将任何第三方 JavaScript 框架/库添加到 Windows 8 应用程序很容易！”我可能对此很陌生...但我认为这并不容易！

甚至可以将 Angular.js 与 Windows 8 应用程序一起使用吗？

【问题讨论】：

标签： javascript angularjs windows-8 microsoft-metro winjs

【解决方案1】：

我通过将ng-csp 添加到我的商店应用程序的 HTML 标记中使其工作。这会启用内容安全策略，从而禁用“eval”之类的功能。我使用了 jQuery(v2.1.1) 和 Angular(v1.3.0-beta.13)。

在AngularJS documentation 中了解更多关于ng-csp 的信息。

【讨论】：

【解决方案2】：

在我的例子中，我用 MSApp.execUnsafeLocalFunction 包装了 angularjs，我只使用了 data-ng-repeat 而不是 ng-repeat

【讨论】：

【解决方案3】：

原因是因为 Angular 为 ng-repeat 和类似指令放置了 html 注释  标签。不幸的是，微软认为这些在使用 .innertHTML 从 Javascript 中输入时是不安全的，并且是不允许的。可以在这里找到：

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

它发生在 jQLite 的第 1534 行：

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

发生的事情是元素是

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

然后当 angular 执行 div.innerHTML = ... 时，元素被删除。如果您在 div.removeChild 处设置断点，您会注意到 div.innerHTML 没有该元素。

[编辑] 写完这个回复后，我尝试添加

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

有效！显然，您必须将所有 angularjs 包装在 MSApp.execUnsafeLocalFunction 中，然后专门包装该行。

【讨论】：

这怎么不在角度文档中。使用 ng-repeats 对每个人来说都不是问题吗？
这只是人们在 HTML5 中制作 Windows 8 应用程序的问题。这不是大多数人使用 Angular 的目的。
为了记录，您现在可以使用 shim (github.com/codemonkeychris/angular-winjs) 使 Angular 与 Windows 和 Windows Phone 应用程序很好地配合。