一页中包含多个AngularJS版本_Angularjs

一页中包含多个AngularJS版本

angularjs

一页中包含多个AngularJS版本,angularjs,Angularjs,在一个页面中加载两个不同版本的AngularJS时，我会遇到什么问题显然，这似乎是一件愚蠢的事情，但我的用例是一个使用AngularJS的页面，该页面包含一个第三方组件，该组件拖拽其首选版本的AngularJS 更新：找到一些信息： Angular确实不准备与其他版本共存。但这是可行的首先加载角度库，并确保在加载窗口之前。angular为空： <script src="vendor/angular/1.2.0/angular.min.js"></script>

在一个页面中加载两个不同版本的AngularJS时，我会遇到什么问题

显然，这似乎是一件愚蠢的事情，但我的用例是一个使用AngularJS的页面，该页面包含一个第三方组件，该组件拖拽其首选版本的AngularJS

更新：

找到一些信息：

Angular确实不准备与其他版本共存。但这是可行的

首先加载角度库，并确保在加载

窗口之前。angular

为空：

  <script src="vendor/angular/1.2.0/angular.min.js"></script>
  <script src="app/app2.js"></script>
  <script>
    var angular2 = angular;
    window.angular = null; // here we're cleaning angular reference
  </script>

  <script src="vendor/angular/1.0.5/angular.js"></script>
  <script src="app/app1.js"></script>
  <script>
    var angular1 = angular;
  </script>

请注意，这里我使用的是仅适用于angular 1.2.x的

$watchCollection

。通过为每个文件提供匿名函数的作用域，您可以强制应用程序访问

angular

属性，而不是

window.angular

属性

最后，您必须使用manuall方法引导应用程序：

<body>

  <div id="myApp1" ng-controller="App1Ctrl">
  </div>

  <div id="myApp2" ng-controller="App2Ctrl">
  </div>

  <script>
    angular1.bootstrap(document.getElementById('myApp1'), ['myApp1']);
    angular2.bootstrap(document.getElementById('myApp2'), ['myApp2']);
  </script>
</body>


angular1.bootstrap（document.getElementById（'myApp1'），['myApp1']）；
angular2.bootstrap（document.getElementById（'myApp2'），['myApp2']）；

正在工作的普朗克。运行后，请检查控制台窗口以查看所使用的angular的日志版本。

好问题！与您一样，我们无法在这个主题上发现太多内容……我们正在部署Angular的一个版本，该版本将嵌入到可能已经加载Angular的客户端网站中

以下是我们所做的：

修改角度源-不要在实现中使用“window.Angular”或“Angular”，请选择其他变量或对象属性来容纳它。如果您确实使用“window.angular”和/或“angular”，则如果版本不同，可能会中断这两个应用程序

重命名所有交付的对象（指令等）；否则，angular的另一个版本可能会尝试处理您的指令

重命名Angular（ng斗篷等）使用的所有CSS类。这将允许您分别设置Angular版本与其他版本的样式

手动引导应用程序，如上面“kseb”所述

如果您要像我在这里描述的那样完全命名空间AngularJS，请注意不要进行全局搜索和替换，因为angular确实需要一个“窗口”引用来注册事件和其他一些地方

我刚在工作中完成这项工作，我正在进行测试。我将用我的结果更新这个答案

Matt Burke描述了一个将Angular JS LIB封装在函数中以创建闭包的过程。缺点是您无法通过公共CDN加载Angular，因为您已经定制了下载

Angular 2将提供一个新的路由器，具有与UI路由器类似的功能，但也允许Angular 1中有一些路由，Angular 2中有其他路由

该路由器目前正被后传到Angular 1，请参阅新路由器开发人员的一篇文章，解释这将如何工作

支持两个版本的通用跨版本路由器背后的想法是帮助用户从Angular 1升级到Angular 2

这个答案并不意味着给内置的angular指令、CSS类或其他可能发生冲突的对象命名。另外，删除window.angular，然后用新版本重新加载，很可能会破坏其他人的angular应用程序。很好的解决方案！我会尝试更进一步，在构建的小部件上重命名

angular

，这样它就被称为

myAngular

，并加载它：（function（angular）{angular.module（'myApp2'，[]）（myAngular）；我不认为这个解决方案可以投入生产。我看到的第一个问题是：删除每个angular脚本的window.angular意味着每次我删除该变量时，已经加载的应用程序都无法工作。第二个问题：上次加载angular脚本时，window.angular不会被删除。这是新的默认角度版本。第三个问题：在示例app1.js和app2.js中，调用“angular”对象来创建模块。这意味着window.angular（仅最后一个）可以为angular的不同版本创建应用程序。那么我为什么要创建angular1和angular2呢？还有一点需要考虑的是，当我们开发一个小部件或可嵌入到第三方网站上的东西时，通常需要同时使用多个angular版本。所以我们必须认为，我们只能控制其中一个角度。所以，在阅读angular脚本代码时，它被固定在窗口上，那么，如何模拟另一个窗口而不是删除angular呢？嗨@kseb，我的项目也有类似的问题。你对此也有什么想法吗？阿尔贝托：你能分享你的结果吗？@albertpeiro我们没有必要继续，因为我们的客户都没有遇到问题。很高兴知道！您是否有机会与我们分享您遵循的具体步骤/脚本/操作？我一直在使用find/replace over angular.js，我非常希望能有一个正则表达式或替换所有ng前缀的步骤。@albertpeiro请随时给我发电子邮件讨论，电子邮件地址在我的个人资料中。我们手动重命名了它们，因为正则表达式搜索/替换不是一个可行的解决方案。@AlbertoPonte我看不到你的电子邮件-我想它是私人的。谢谢你的帮助！

<body>

  <div id="myApp1" ng-controller="App1Ctrl">
  </div>

  <div id="myApp2" ng-controller="App2Ctrl">
  </div>

  <script>
    angular1.bootstrap(document.getElementById('myApp1'), ['myApp1']);
    angular2.bootstrap(document.getElementById('myApp2'), ['myApp2']);
  </script>
</body>