Question

将 AngularJS 的两个不同版本加载到一个页面中可能会遇到哪些问题？

显然，这似乎是一件愚蠢的事情，但我的用例是一个使用 AngularJS 并合并第三方组件的页面，该组件拖动了 AngularJS的首选版本。

更新

找到一些信息：

https://groups.google.com/forum/#!msg/angular/G8xPyD1F8d0/u1QNDNvcwW4J https://github.com/angular/angular.js/pull/1535

Answer 1

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

首先加载角度库并确保在加载window.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>

请注意，每个角度版本的应用程序（app1.js，app2.js）应在加载角度库后立即加载。

应用程序的每个JavaScript文件都应包含在自执行函数(function(angular) { ... })(angular)中。请看app2.js：

的示例

(function(angular) {

angular.module('myApp2', []).

controller('App2Ctrl', function($scope) {
    $scope.$watchCollection('[a, b, c]', function() {
        console.log(angular.version.full);
    });
});

})(angular);

请注意，我在这里使用的$watchCollection仅适用于1.2.x角。通过为每个文件提供匿名函数范围，您强制应用程序达到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>

工作人员here。运行后请检查控制台窗口以查看已使用角度的记录版本。

Answer 2

好问题！和你一样，我们无法在这个主题上发现很多...我们正在使用我们的产品部署Angular版本，该产品将嵌入客户端网站中，也可能已经加载了Angular。

以下是我们所做的：

修改Angular源 - 不要在实现中使用“window.angular”或“angular”，选择其他变量或对象属性来容纳它。如果你使用“window.angular”和/或“angular”，如果版本不同，它可能会破坏这两个应用程序。
重命名所有交付的对象（指令等）;否则，另一个版本的angular可能会尝试处理你的指令。
重命名Angular使用的所有CSS类（ng-cloak等）。这将允许您将Angular的版本与其他版本分开设置样式。
手动引导您的应用程序，如上面的“kseb”所述。

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

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

Answer 3

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

http://www.mattburkedev.com/multiple-angular-versions-on-the-same-page/

Answer 4

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

此路由器目前正被反向移植到Angular 1，请在此处查看来自新路由器开发人员的presentation，说明这将如何工作。

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

一个页面中有多个版本的AngularJS

4 个答案: