如何重命名或选择性加载angularJS

How do I rename or selectively load angularJS?

本文关键字：加载 angularJS 选择性 重命名      更新时间：2023-09-26

我们有一个产品，它是人们加载到网站上的一个小部件，由一个同样需要angular运行的JS文件组成，因此angular被绑定到JS文件中。

然而，如果一个网站已经在使用和加载angular本身，当他们加载我们的小部件时，他们会得到一个错误，该错误会导致以下一切：

WARNING: Tried to load angular more than once

这是完全合理的，因为angular确实被加载了不止一次。

我们想做的是以下任一项：

  1. 在我们的脚本中，重命名/namespace angular，这样它就不会与主机站点已加载angular，或
  2. 检测角度是否为已经加载了，如果是这样的话，我们自己也不要加载angular

展示我们的代码示例将很困难，因为它分布在大约20个文件等中，但它基于以下使用requirejs加载所有内容的角种子项目，然后我们将编译为一个文件：https://github.com/tnajdek/angular-requirejs-seed

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

注意：这是而不是任何"检查angular是否正确加载"类型问题的副本，angular被打包在我们的小部件js中，当angular也已经由父页面加载时，问题就会出现。我们需要一种方法来重命名包中的angular。

我建议看看这个答案，它与在相同情况下运行的chrome扩展有关。这里的想法是将angular的加载与网站的加载分开，并假设您的小部件将在页面的主要内容加载后加载。

  1. 如果您正在使用ng应用程序指令或ng控制器加载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与客户端网站的版本不同，它会如何工作，而且我只让它与扩展一起工作，它们有点不同，因为它们生活在自己孤立的"世界"中。

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

相关文章：