Несколько версий AngularJS на одной странице

Какие проблемы могут возникнуть при загрузке двух разных версий AngularJS на одну страницу?

Очевидно, это кажется глупым делом, но мой вариант использования - это страница, в которой используется AngularJS, включающая сторонний компонент, который перетаскивает свою предпочтительную версию AngularJS.

Update:

Найдена информация:

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

ОТВЕТЫ

Ответ 1

Angular действительно не готов сосуществовать с другой версией. Но это возможно.

Прежде всего загрузите библиотеку 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) для каждой версии angular должно быть загружено сразу после загрузки библиотеки 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.

Наконец, вы должны загружать приложение с помощью метода 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>

Рабочий плунжер здесь. После запуска проверьте окно консоли, чтобы просмотреть зарегистрированные версии angular.

Ответ 2

Отличный вопрос! Как и вы, нам не удалось раскрыть многое в этой теме... мы находимся в процессе развертывания версии Angular с нашим продуктом, который будет встроен в клиентские сайты, которые также могут иметь уже загруженный Angular.

Вот что мы сделали:

  • Измените источник Angular - не используйте "window.angular" или "angular" в своей реализации, выберите другое свойство переменной или объекта для его размещения. Если вы используете "window.angular" и/или "angular", это может сломать оба приложения, если версии отличаются.
  • Переименовать все доставленные объекты (директивы и т.д.); в противном случае другая версия Angular может попытаться обработать ваши директивы.
  • Переименуйте все классы CSS, используемые Angular (ng-cloak и т.д.). Это позволит вам отформатировать вашу версию Angular отдельно от другой версии.
  • Вручную загрузите ваше приложение, как описано выше "kseb".

Если вы собираетесь полностью назвать пространство AngularJS, как я описал здесь, позаботьтесь о том, чтобы не выполнять глобальный поиск и не заменять, потому что Angular нуждается в ссылке "window" для регистрации событий и нескольких других местах.

Я только что закончил это на работе, и я нахожусь в процессе тестирования. Я буду обновлять этот ответ своими результатами.

Ответ 3

Мэтт Берк описывает процесс обтекания Angular JS libs в функции для создания закрытия. Недостатком является то, что вы не можете загрузить Angular через общедоступный CDN, поскольку вы настроили загрузку.

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

Ответ 4

Angular 2 предоставит новый маршрутизатор с аналогичными функциями для маршрутизатора UI, но это также позволит иметь некоторые маршруты в Angular 1 и другие в Angular 2.

Этот маршрутизатор в настоящее время обращается к Angular 1, см. здесь презентация от разработчика нового маршрутизатора, объясняющего, как это будет работать.

Идея общего кросс-версии маршрутизатора с поддержкой обеих версий заключается в том, чтобы помочь пользователям обновиться с Angular 1 до Angular 2.