一页中包含多个 AngularJS 版本 [英] Multiple versions of AngularJS in one page
问题描述
将两个不同版本的 AngularJS 加载到一个页面时，我可能会遇到什么问题?
显然，这似乎是一件愚蠢的事情，但我的用例是一个使用 AngularJS 的页面，其中包含一个第三方组件，该组件拖入其首选版本的 AngularJS.
更新:
找到一些信息:
https://groups.google.com/forum/#!msg/angular/G8xPyD1F8d0/u1QNDNvcwW4Jhttps://github.com/angular/angular.js/pull/1535
Angular 真的不准备与其他版本共存.但这是可行的.
首先加载angular库并确保加载前window.angular为空:
<script src="vendor/angular/1.2.0/angular.min.js"></script><script src="app/app2.js"></script><脚本>var angular2 = 角度；window.angular = null;//这里我们正在清理角度参考<script src="vendor/angular/1.0.5/angular.js"></script><script src="app/app1.js"></script><脚本>var angular1 = 角度；注意，每个版本的angular的每个应用程序(app1.js，app2.js)应该在加载angular库后立即加载.
应用程序的每个 JavaScript 文件都应该包含在自执行函数 (function(angular) { ... })(angular) 中.看app2.js的例子:
(function(angular) {angular.module('myApp2', []).控制器('App2Ctrl'，函数($scope){$scope.$watchCollection('[a, b, c]', function() {console.log(angular.version.full);});});})(角度);请注意，这里我使用的是 $watchCollection，它仅适用于 angular 1.2.x.通过为每个文件提供匿名函数的范围，您将迫使应用程序访问 angular 属性而不是 window.angular 属性.
最后，您必须使用手动方法引导应用程序:
<div id="myApp1" ng-controller="App1Ctrl"><div id="myApp2" ng-controller="App2Ctrl">
<脚本>angular1.bootstrap(document.getElementById('myApp1'), ['myApp1']);angular2.bootstrap(document.getElementById('myApp2'), ['myApp2']);
工作plunker 这里.运行后，请检查控制台窗口以查看使用的角度记录版本.
What issues might I experience in having two different versions of AngularJS loaded into one page?
Obviously this seems like a stupid thing to do, but my use case is a page that uses AngularJS incorporating a third-party component that drags in its preferred version of AngularJS.
Update:
Found some info:
https://groups.google.com/forum/#!msg/angular/G8xPyD1F8d0/u1QNDNvcwW4J https://github.com/angular/angular.js/pull/1535
Angular is really not prepared to co-exist with other version. But it's feasible.
First of all load angular library and make sure that before loading window.angular is empty:
<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>
Note that each application (app1.js, app2.js) for each version of angular should be loaded immediately after loading angular library.
Each JavaScript file of the application shoud be wrapped in self executing function (function(angular) { ... })(angular). Look at the example of app2.js:
(function(angular) {
angular.module('myApp2', []).
controller('App2Ctrl', function($scope) {
$scope.$watchCollection('[a, b, c]', function() {
console.log(angular.version.full);
});
});
})(angular);
Note that here I'm using $watchCollection which is only available for angular 1.2.x. By providing scope of anonymous function for each file you are forcing application to reach angular property instead of window.angular property.
Finally you have to bootstrap the application using manuall method:
<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>
Working plunker here. After running please check console window to see logged versions of angular used.
这篇关于一页中包含多个 AngularJS 版本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
