Javascript 在自定义命名空间和已删除的window.angular上使用AngularJs

对于我客户的网站，我在1.5.7版中使用了Angular JS。在这个网站上还有一个集成远程JS应用程序的动态机制。该机制首先加载一个配置文件，其中包含必须加载的其他脚本和样式表的信息。加载的应用程序之一也使用Angular JS，但版本为1.3.9。此星座图会导致一个错误，表明存在与ngAnimate模块的版本不兼容

我的第一个解决方案是将

window.angular

移动到

window.vendor.angular

和

delete window.angular

，这样远程加载的angular JS可以正常工作。此解决方案的问题是，Angular JS在多个位置使用$window.Angular

替换

window.angular

和

$window.angular

不是真正的解决方案，因为我想从公共CDN加载AngularJS

---

我现在正在寻找一个解决方案，在这个解决方案中，我可以运行完全隔离的Angular JS，或者类似于jQuery中的

jQuery.noConflict（）

。

这是一个非常简单的解决方案，虽然不太新奇，但它很有效。加载angularjs代码时，它存储一个内部变量来存储angularjs API。因此，解决方案是加载angularjs

1.5.7

，并将其存储在一个单独的位置（即

window.angular1\u 5\u 7

）并清除之前的声明（即

window.angular={}；

），这样当加载

1.3.9

时，它就不会发生任何冲突

<script>
  // angularjs stores window.angular internally when it is declared
  // var angular = window.angular || (window.angular = {}),
  window.angular1_5_7 = window.angular;
  window.angular = {};
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>

最后，当您引导

1.5.7

应用程序时，您可以指定angular

1.5.7

的存储版本（即

window.angular1\u 5\u 7

）

$window.angular和代理 这似乎不是问题，因为angularjs在使用

$window.angular

时不会引起冲突，但如果是这样，您可以尝试此解决方案

我能找到的解决

$window.angular

问题的唯一方法是使用中介

get

属性

'angular'

将其作为

$window

服务的装饰器来解决。因此，当对名为

angular

的属性执行

get

时，它将返回

window。否则，angular1_5_7

将返回正常对象

不幸的是，它不能与所有浏览器完全兼容，它已经在ES6上引入，并且在ES5上没有等效的实现。

完整工作片段：

//应用程序1.3.9声明
（功能（）{
角度模块（'app139'，[]）
.run（函数（$rootScope，$window）{
$rootScope.version=$window.angular.version；
});
元素（文档）.ready（函数（）{
var-element=angular.element（document.getElementById（'app139'）；
引导（元素，['app139']）；
});
})();
//附录1.5.7声明
（功能（角度）{
角度.模块（'app157'，[]）
.config（函数（$provide）{
$provide.decorator（“$window”，函数$windowDecorator（$delegate）{
返回新代理（$delegate{
获取：函数（目标、道具）{
返回属性=='角度'？
window.angular1_5_7：
目标[道具]
}
});
});
})
.run（函数（$rootScope，$window）{
$rootScope.version=$window.angular.version；
});
元素（文档）.ready（函数（）{
var-element=angular.element（document.getElementById（'app157'）；
引导（元素，['app157']）；
});
})（窗角1_5_7）

//angularjs在声明window.angular时在内部存储它
//var angular=window.angular | |（window.angular={}），
window.angular1_5_7=window.angular；
window.angular={}；
附录1.3.9
{{version}

附录1.5.7
{{version}

这是一个非常简单的解决方案，虽然不太花哨，但很有效。加载angularjs代码时，它存储一个内部变量来存储angularjs API。因此，解决方案是加载angularjs
1.5.7
，并将其存储在一个单独的位置（即
window.angular1\u 5\u 7
）并清除之前的声明（即
window.angular={}；
），这样当加载
1.3.9
时，它就不会发生任何冲突

<script>
  // angularjs stores window.angular internally when it is declared
  // var angular = window.angular || (window.angular = {}),
  window.angular1_5_7 = window.angular;
  window.angular = {};
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>

最后，当您引导
1.5.7
应用程序时，您可以指定angular
1.5.7
的存储版本（即
window.angular1\u 5\u 7
）

$window.angular和代理
这似乎不是问题，因为angularjs在使用
$window.angular
时不会引起冲突，但如果是这样，您可以尝试此解决方案

我能找到的解决
$window.angular
问题的唯一方法是使用中介
get
属性
'angular'
将其作为
$window
服务的装饰器来解决。因此，当对名为
angular
的属性执行
get
时，它将返回
window。否则，angular1_5_7
将返回正常对象

不幸的是，它不能与所有浏览器完全兼容，它已经在ES6上引入，并且在ES5上没有等效的实现。

完整工作片段：


//应用程序1.3.9声明
（功能（）{
角度模块（'app139'，[]）
.run（函数（$rootScope，$window）{
$rootScope.version=$window.angular.version；
});
元素（文档）.ready（函数（）{
var-element=angular.element（document.getElementById（'app139'）；
引导（元素，['app139']）；
});
})();
//附录1.5.7声明
（功能（角度）{
角度.模块（'app157'，[]）
.config（函数（$provide）{
$provide.decorator（“$window”，函数$windowDecorator（$delegate）{
返回新代理（$delegate{
获取：函数（目标、道具）{
返回属性=='角度'？
window.angular1_5_7：
(function(angular) {
  angular.module('app157', []);

  angular.element(document).ready(function() {
    var element = angular.element(document.getElementById('app157'));
    angular.bootstrap(element, ['app157']);
  });
})(window.angular1_5_7);

angular.module('app157', [])
    .config(function($provide) {

      $provide.decorator('$window', function $windowDecorator($delegate) {

        return new Proxy($delegate, {
          get: function(target, prop) {
            return prop == 'angular' ?
              window.angular1_5_7 :
              target[prop]
          }
        });
      });
    })