Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit 748a6c8

Browse files
siddiipetebacondarwin
authored andcommitted
fix(angular.bootstrap): only allow angular to load once
This is hard to test as a unit-test, since it involves the actual loading of angular, but it turns out that it is easy to test using a protractor e2e test. Closes #5863 Closes #5587
1 parent ed4cd6c commit 748a6c8

File tree

2 files changed

+41
-0
lines changed

2 files changed

+41
-0
lines changed

src/Angular.js

+35
Original file line numberDiff line numberDiff line change
@@ -1241,6 +1241,41 @@ function angularInit(element, bootstrap) {
12411241
* Note that ngScenario-based end-to-end tests cannot use this function to bootstrap manually.
12421242
* They must use {@link ng.directive:ngApp ngApp}.
12431243
*
1244+
* Angular will detect if it has been loaded into the browser more than once and only allow the
1245+
* first loaded script to be bootstrapped and will report a warning to the browser console for
1246+
* each of the subsequent scripts. This prevents strange results in applications, where otherwise
1247+
* multiple instances of Angular try to work on the DOM.
1248+
*
1249+
* <example name="multi-bootstrap" module="multi-bootstrap">
1250+
* <file name="index.html">
1251+
* <script src="../../../angular.js"></script>
1252+
* <div ng-controller="BrokenTable">
1253+
* <table>
1254+
* <tr>
1255+
* <th ng-repeat="heading in headings">{{heading}}</th>
1256+
* </tr>
1257+
* <tr ng-repeat="filling in fillings">
1258+
* <td ng-repeat="fill in filling">{{fill}}</td>
1259+
* </tr>
1260+
* </table>
1261+
* </div>
1262+
* </file>
1263+
* <file name="controller.js">
1264+
* var app = angular.module('multi-bootstrap', [])
1265+
*
1266+
* .controller('BrokenTable', function($scope) {
1267+
* $scope.headings = ['One', 'Two', 'Three'];
1268+
* $scope.fillings = [[1, 2, 3], ['A', 'B', 'C'], [7, 8, 9]];
1269+
* });
1270+
* </file>
1271+
* <file name="protractor.js" type="protractor">
1272+
* it('should only insert one table cell for each item in $scope.fillings', function() {
1273+
* expect(element.all(by.css('td')).count())
1274+
* .toBe(9);
1275+
* });
1276+
* </file>
1277+
* </example>
1278+
*
12441279
* @param {Element} element DOM element which is the root of angular application.
12451280
* @param {Array<String|Function|Array>=} modules an array of modules to load into the application.
12461281
* Each item in the array should be the name of a predefined module or a (DI annotated)

src/angular.suffix

+6
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
if (window.angular.bootstrap) {
2+
//AngularJS is already loaded, so we can return here...
3+
console.log('WARNING: Tried to load angular more than once.');
4+
return;
5+
}
6+
17
//try to bind to jquery now so that one can write angular.element().read()
28
//but we will rebind on bootstrap again.
39
bindJQuery();

0 commit comments

Comments
 (0)