多个版本的AngularJS在一个页面

发布时间：2020-12-17 07:43:55 所属栏目：安全来源：网络整理

导读：将AngularJS的两个不同版本加载到一个页面中可能会遇到什么问题？显然,这似乎是一个愚蠢的事情,但我的用例是一个使用AngularJS的页面,其中包含了第一个使用AngularJS的首选版本的第三方组件. 更新：找到一些信息： https://groups.google.com/forum/#!msg/

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

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

更新：

找到一些信息：

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

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

首先加载角度库,并确保在加载window.angle为空之前：

<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文件都包含在自我执行功能(功能(角){…})(角)中.看看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的角色.通过为每个文件提供匿名函数的范围,强制应用程序到达角度属性而不是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.运行后请检查控制台窗口以查看已使用角度的日志版本.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!