将两个不同版本的AngularJS加载到一个页面中可能会遇到什么问题？
显然,这似乎是一件愚蠢的事情,但我的用例是一个使用AngularJS的页面,其中包含拖拽其首选版本的AngularJS的第三方组件.
更新:
找到一些信息:
https://groups.google.com/forum/#!msg/angular/G8xPyD1F8d0/u1QNDNvcwW4J https://github.com/angular/angular.js/pull/1535
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>
在这里工作的plunker .运行后请检查控制台窗口以查看已使用角度的记录版本.
| 归档时间： |
|
| 查看次数： |
12877 次 |
| 最近记录： |