javascript - 动态加载的 AngularJS 应用程序

Question

我正在寻求将 AngularJS Web 应用程序集成到许多网站中。我希望能够为每个网站管理员提供 HTML 代码，如下所示:

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

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

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 准备就绪，然后声明您的模块，然后使用您的模块引导文档。如果引导是“之后”执行的(异步地，脱离 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、样式和代码。