javascript - Use AngularJs on custom namespace and deleted window.angular -

for website of customer use angular js in version 1.5.7. on website there dynamic mechanism integrate remote js applications. mechanism loading first configuration file information additional scripts , stylesheets has loaded. 1 of loaded appications using angular js in version 1.3.9. constellation results in error says there version incompatibility nganimate module.

my first solution move window.angular window.vendor.angular , delete window.angular remote loaded angular js can work fine. problem solution is, angular js uses $window.angular @ several locations.

replacing window.angularand $window.angular no real solution because want load angularjs public cdn.

i looking solution can run angular js isolated or jquery.noconflict() jquery.

it's pretty simple solution, not fancy works. when angularjs code loads, stores internal variable store angularjs api. so, solution load angularjs 1.5.7 , store in separate place (i.e., window.angular1_5_7) , clean previous declaration (i.e., window.angular = {};) when 1.3.9 gets loaded won't conflicts.

<script>   // angularjs stores window.angular internally when declared   // var angular = window.angular || (window.angular = {}),   window.angular1_5_7 = window.angular;   window.angular = {}; </script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script> 

then 1.3.9 bootstrap on normal flow. can use ng-app well.

(function() {   angular.module('app139', []);    angular.element(document).ready(function() {     var element = angular.element(document.getelementbyid('app139'));     angular.bootstrap(element, ['app139']);   }); })(); 

and finally, when bootstrap 1.5.7 app, can especify stored version of angular 1.5.7 (i.e, window.angular1_5_7).

(function(angular) {   angular.module('app157', []);    angular.element(document).ready(function() {     var element = angular.element(document.getelementbyid('app157'));     angular.bootstrap(element, ['app157']);   }); })(window.angular1_5_7); 

$window.angular , proxy

it doesn't seem issue because angularjs wouldn't cause conflicts when using $window.angular if so, try solution.

the way find solve $window.angular issue using es6 proxies intermediate get of property 'angular' resolving decorator $window service. when $window gets performed get on property called angular return window.angular1_5_7 otherwise return normal object.

unfortunately, it's not compatible browser yet, has been introduced on es6 , there no equivalent implementation on es5.

angular.module('app157', [])     .config(function($provide) {        $provide.decorator('$window', function $windowdecorator($delegate) {          return new proxy($delegate, {           get: function(target, prop) {             return prop == 'angular' ?               window.angular1_5_7 :               target[prop]           }         });       });     }) 

full working snippet:

// app 1.3.9 declarations  (function() {      angular.module('app139', [])      .run(function($rootscope, $window) {        $rootscope.version = $window.angular.version;      });      angular.element(document).ready(function() {        var element = angular.element(document.getelementbyid('app139'));      angular.bootstrap(element, ['app139']);    });    })();    // app 1.5.7 declarations  (function(angular) {      angular.module('app157', [])      .config(function($provide) {          $provide.decorator('$window', function $windowdecorator($delegate) {            return new proxy($delegate, {            get: function(target, prop) {              return prop == 'angular' ?                window.angular1_5_7 :                target[prop]            }          });        });      })      .run(function($rootscope, $window) {        $rootscope.version = $window.angular.version;      });      angular.element(document).ready(function() {        var element = angular.element(document.getelementbyid('app157'));      angular.bootstrap(element, ['app157']);    });    })(window.angular1_5_7);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>  <script>    // angularjs stores window.angular internally when declared    // var angular = window.angular || (window.angular = {}),    window.angular1_5_7 = window.angular;    window.angular = {};  </script>  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.js"></script>    <div id="app139">    <h2>app 1.3.9</h2>    <p>{{ version }}</p>  </div>    <div id="app157">    <h2>app 1.5.7</h2>    <p>{{ version }}</p>  </div>