动态加载的 AngularJS 应用程序答案

【问题标题】：Dynamically loaded AngularJS application动态加载的 AngularJS 应用程序
【发布时间】：2015-04-26 14:03:36
【问题描述】：

我希望将 AngularJS Web 应用程序集成到多个网站中。我希望能够为每个网站管理员提供一个 HTML 代码，例如：

<div id='angular-integration-app'></div><script src="widget.js"></script>

将此 HTML 代码插入网站后，网站应加载 AngularJS 并插入一个 AngularJS 应用程序作为标有“angular-integration-app” ID 的元素的子元素。

This Plunker has an implementation，但是这个实现不起作用。它间歇性地失败，错误为：

Uncaught ReferenceError: angular is not defined  application.js:1
Uncaught Error: [$injector:modulerr]  angular.js:38

我注意到它通常在第一次加载时运行良好，但是当按下浏览器刷新按钮时，它经常会失败。当它不是通过 Plunker 托管时尤其如此。

请就创建始终有效的动态 AngularJS 应用程序集成的最佳方法提出建议。

【问题讨论】：

标签： javascript angularjs dynamic integration

【解决方案1】：

这种不一致的行为是因为有时页面被缓存并且代码被同步执行，有时却没有。

要解决这个问题，您需要等待 Angular 准备好，然后声明您的模块，然后使用您的模块引导文档。如果引导是“之后”执行的（异步，在角度上下文之外），则不能在 HTML 中使用 ng-app。我进行了更改以向您展示它应该是怎样的：

var element = document.querySelector('#angular-integration-app');
angular.element(element).ready(function() {

  var app = angular.module('myapp', []);

  app.directive('customForm', function() {
    return {
      restrict: 'A',
      template: 'hello world'
    };
  });

  angular.bootstrap(element, ['myapp']);
});

http://plnkr.co/edit/7KbD1Okwx0MwhDIJXIGE?p=preview

或者，如果您不希望 angular 与您的目标 html 混淆（如果他自己使用另一个版本的 angularjs 会发生什么？），您可以创建一个 iFrame 来隔离您的 angular、样式和代码。

【讨论】：

您好，谢谢您的回复。您提供的代码在 Plunker 中工作，但是当我将每个文件复制到我的机器并使用本地 HTTP 服务器运行它时，我会得到与以前相同的行为：当第一次打开浏览器选项卡时，会打印“YAHOW”到控制台，页面上会显示“hello world”。按下浏览器刷新按钮时，控制台中会出现一条错误消息，提示“未捕获的 ReferenceError：未定义角度”。我怀疑仍然存在未解决的页面缓存或同步问题。
哦，这是另一个错误。您是否在执行此代码之前加载 angular.js 文件？例如，您可以在<header> 中加载文件并将此代码放在<body> 中。否则，如果您使用 jQuery，修复它的简单方法是使用 $(document).ready( ... ) 而不是 angular.element( element ).ready( ... )。或者，如果您不使用 jQuery，只需尝试 (function() { ... })()

【解决方案2】：

code in this Plunker 看起来可以解决问题。我现在将 AngularJS 添加为 head 元素（名为“script”的变量）的子元素，并推迟修改 DIV 或加载 AngularJS 应用程序，直到“script.onload”。我也将 floribon 帖子中的一些想法融入了这个 Plunker。

script.onload = function() {
  // code here
};

【讨论】：