发表新帖
发表新帖

Multiple versions of AngularJS in one page

后端 未结
关注
4 925
予麋鹿
予麋鹿 2020-12-05 05:46

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

相关标签:
4条回答
  • 南旧
    2020-12-05 05:57

    Angular 2 will provide a new router with similar features to UI router, but that will also allow to have some routes in Angular 1 and others in Angular 2.

    This router is currently being backported to Angular 1, see here a presentation from the developer of the new router explaining how this will work.

    The idea behind a common cross-version router with support for both version is to help users upgrade from Angular 1 to Angular 2.

    0 讨论(0)
  • 死守一世寂寞
    2020-12-05 06:01

    Matt Burke describes a process to wrap the Angular JS libs in a function to create a closure. Downside is that you cannot load Angular via a public CDN as you have customized the download.

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

    0 讨论(0)
  • Happy的楠姐
    2020-12-05 06:02

    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.

    0 讨论(0)
  • 再見小時候
    2020-12-05 06:14

    Great question! Like you, we were unable to uncover much on this topic...we are in the process of deploying a version of Angular with our product which will be embedded within client websites that could also have Angular already loaded.

    Here is what we have done:

    1. Modify the Angular source - do not use "window.angular" or "angular" in your implementation, choose some other variable or object property to house it. If you do use "window.angular" and/or "angular", it could break both applications if the versions are different.
    2. Rename all delivered objects (directives, etc); otherwise, the other version of angular could attempt to process your directives.
    3. Rename all CSS classes used by Angular (ng-cloak, etc). This will allow you to style your version of Angular separately from the other version.
    4. Manually bootstrap your application, as described by 'kseb' above.

    If you are going to completely name space AngularJS as I have described here, take care to not do a global search and replace because angular does need a "window" reference for registering events, and a few other places.

    I just finished doing this at work and I am in the process of testing. I will update this answer with my results.

    0 讨论(0)
 看不清?
提交回复
热议问题