动态加载 AngularJS 个应用程序

Question

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

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

将此 HTML 代码插入网站后，网站应加载 AngularJS 并插入 AngularJS 应用程序作为 ID 为 [=] 的元素的子元素24=]

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

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

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

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

Answer 1

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

要解决这个问题，您需要等待 angular 准备就绪，然后声明您的模块，然后 bootstrap 包含您的模块的文档。如果执行 bootstrapping "afterwards"（异步，超出 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、样式和代码。

Answer 2

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

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

动态加载 AngularJS 个应用程序

Dynamically loaded AngularJS application

javascript

integration

dynamic

angularjs