如何重命名或有选择地加载angularJS？

Question

我们有一个产品是一个小部件人加载到他们的网站上，它由一个JS文件组成，也需要角度来运行，所以angular被捆绑到JS文件中。

但是，如果某个网站已经在使用并自行加载角度，那么当他们加载我们的小部件时，会出现错误，并使用以下内容杀死所有内容：

WARNING: Tried to load angular more than once

这完全合理，因为角度确实被加载了不止一次。

我们要做的是以下任何一项：

1. 在我们的脚本中，重命名/命名空间angular，因此它不会发生冲突 主机站点已加载角度，或
2. 检测角度是否为 已经装好了，如果是的话，不要自己装角。

要显示我们的代码的示例很困难，因为它分布在大约20个文件等上，但是它基于以下使用requirejs加载所有内容的角种子项目，然后我们＆＃39;重新编译为单个文件：https://github.com/tnajdek/angular-requirejs-seed

非常感谢任何反馈/提示/解决方案

注意这是不重复任何＆＃34;检查角度是否正确加载＆＃34;类型问题，angular被打包在我们的widget js中，当父页面已经加载了angular时出现问题。我们需要一种在包内重命名角度的方法。

Answer 1

我建议看看这个answer，它与在相同情况下运行的Chrome扩展程序有关。这里的想法是将你的角度加载与网站分开，并假设你的小部件将在加载页面的主要内容后加载。

1. 如果您使用ng-app指令或ng-controller加载html内容，请将html内容包装在以ng-non-bindable作为属性的容器中。
2. 当您加载angular.js时，Angular立即查找具有ng-app属性的元素。如果存在两个ng-apps，即您的网站和小部件，则会导致错误。推迟解析：window.name = "NG_DEFER_BOOTSTRAP!" + window.name;然后加载脚本。
3. 加载脚本后，将window.name设置为''或之前的任何内容。

4. 使用以下内容单独引导（角度查找ng-app属性的术语）您的html内容：

   var appRoot = document.querySelector('#id');
   
   angular.bootstrap(appRoot, ['angularModuleName']);
   

那应该这样做......警告，如果您的小部件Angular与客户端网站的版本不同，我不知道这将如何工作，我只是使用扩展，这是一点点有点不同，因为他们生活在自己孤立的“世界”中。

话虽如此，我觉得在处理这个问题时，这会让人们朝着正确的方向前进。