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
This commit is contained in:
committed by
Vojta Jina
parent
ca69dc6f17
commit
0d60f8d367
@@ -1241,6 +1241,41 @@ function angularInit(element, bootstrap) {
|
||||
* Note that ngScenario-based end-to-end tests cannot use this function to bootstrap manually.
|
||||
* They must use {@link ng.directive:ngApp ngApp}.
|
||||
*
|
||||
* Angular will detect if it has been loaded into the browser more than once and only allow the
|
||||
* first loaded script to be bootstrapped and will report a warning to the browser console for
|
||||
* each of the subsequent scripts. This prevents strange results in applications, where otherwise
|
||||
* multiple instances of Angular try to work on the DOM.
|
||||
*
|
||||
* <example name="multi-bootstrap" module="multi-bootstrap">
|
||||
* <file name="index.html">
|
||||
* <script src="../../../angular.js"></script>
|
||||
* <div ng-controller="BrokenTable">
|
||||
* <table>
|
||||
* <tr>
|
||||
* <th ng-repeat="heading in headings">{{heading}}</th>
|
||||
* </tr>
|
||||
* <tr ng-repeat="filling in fillings">
|
||||
* <td ng-repeat="fill in filling">{{fill}}</td>
|
||||
* </tr>
|
||||
* </table>
|
||||
* </div>
|
||||
* </file>
|
||||
* <file name="controller.js">
|
||||
* var app = angular.module('multi-bootstrap', [])
|
||||
*
|
||||
* .controller('BrokenTable', function($scope) {
|
||||
* $scope.headings = ['One', 'Two', 'Three'];
|
||||
* $scope.fillings = [[1, 2, 3], ['A', 'B', 'C'], [7, 8, 9]];
|
||||
* });
|
||||
* </file>
|
||||
* <file name="protractor.js" type="protractor">
|
||||
* it('should only insert one table cell for each item in $scope.fillings', function() {
|
||||
* expect(element.all(by.css('td')).count())
|
||||
* .toBe(9);
|
||||
* });
|
||||
* </file>
|
||||
* </example>
|
||||
*
|
||||
* @param {Element} element DOM element which is the root of angular application.
|
||||
* @param {Array<String|Function|Array>=} modules an array of modules to load into the application.
|
||||
* Each item in the array should be the name of a predefined module or a (DI annotated)
|
||||
|
||||
@@ -1,3 +1,9 @@
|
||||
if (window.angular.bootstrap) {
|
||||
//AngularJS is already loaded, so we can return here...
|
||||
console.log('WARNING: Tried to load angular more than once.');
|
||||
return;
|
||||
}
|
||||
|
||||
//try to bind to jquery now so that one can write angular.element().read()
|
||||
//but we will rebind on bootstrap again.
|
||||
bindJQuery();
|
||||
|
||||
Reference in New Issue
Block a user