16

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

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

更新：

查到一些资料：

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

4

4 回答 4

9

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>

请注意，每个版本的 angular 的每个应用程序 ( app1.js, app2.js) 应在加载 angular 库后立即加载。

应用程序的每个 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的是仅适用于 angular 1.2.x 的版本。通过为每个文件提供匿名函数的范围，您将强制应用程序访问angular属性而不是window.angular属性。

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

<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>

在这里工作的笨蛋。运行后请检查控制台窗口以查看使用的角度的记录版本。

于 2013-10-23T20:51:02.213 回答
3

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

这是我们所做的：

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

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

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

于 2013-12-31T09:44:27.997 回答
2

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

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

于 2014-12-23T19:04:11.140 回答
1

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

该路由器目前正在向后移植到 Angular 1，请参阅此处新路由器开发人员的演示文稿，解释其工作原理。

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

于 2015-04-03T20:47:16.517 回答