Angular : Bootstrap giving error in console

Question

Here is my code :

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<script type="text/javascript" src="./angular.min.js"></script>
<script>
    var app = angular.module('myApp', []);
    var app1 = angular.module('myApp1', []);
    app.controller('myCtrl', function($scope) {
        $scope.firstName = "sparsh";
        $scope.lastName = "khandelwal";
    });
</script>
<title>Home Page</title>
</head>
<body>
    <div ng-app="myApp" ng-init="name='Sparsh'">
        <div ng-controller="myCtrl">{{firstName}}</div>
        <p>
            Name : <input type="text" ng-model="name">
        </p>
        <h1>Hello {{name}}</h1>

    </div>
    <div ng-app="myApp1" ng-init="names=['Jani','Hege','Kai']">
        <ul>
            <li ng-repeat="x in names">{{x}}</li>
        </ul>
    </div>
    <script type="text/javascript">
        angular.bootstrap(document, ['myApp1','myApp']);
    </script>
</body>
</html>

Although i can see the expected output, but at the same time facing console error.

enter image description here

here is the description of error

(while i click on the url)

enter image description here

it says it already bootstrapped so i remove the 'myApp' from .bootstrap function, but that didnt work.

Please help.

The fiddle is not giving any error for me - jsfiddle.net/arunpjohny/q13j4weL/3 - after removing both ng-app attributes from the html — Arun P Johny
– Arun P Johny, Commented Apr 25, 2015 at 12:42
@ArunPJohny if you remove them , how can you say which div is associated with which app ? — sparsh610
– sparsh610, Commented Apr 25, 2015 at 12:49

Omri Aharon · Accepted Answer · 2015-04-25 12:35:19Z

1

You are doing both ng-app declarations and angular.bootstrap(document, ['myApp1','myApp']);.

You need to choose only one method, otherwise you get the well descripted error of multiple bootstrapped applications.

answered Apr 25, 2015 at 12:35

Omri Aharon

17.1k5 gold badges43 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

sparsh610 Over a year ago

checked this one stackoverflow.com/questions/29864706/…

Arun P Johny Over a year ago

@SparshKhandelwal that is in the case if there are multiple ng-app attributes... here you are using auto initialization and manual initialization which is causing the multiple initialization error

Omri Aharon Over a year ago

@SparshKhandelwal You might want to do 2 bootstrapping according to element IDs, like this: jsfiddle.net/seyenaz/q13j4weL/4

sparsh610 Over a year ago

@OmriAharon please elaborate it , i am not able to understand : 'here you are using auto initialization and manual initialization which is causing the multiple initialization error'

Omri Aharon Over a year ago

You need to either declare ng-app="myApp" or angular.bootstrap(..), not both. These are 2 ways to bootstrap, you have to choose one.

Arun P Johny · Accepted Answer · 2015-04-25 13:18:26Z

The problem is as explained in the previous comments, the automatic and manual initialization of modules.

Since you want to initialize them separately for each elements then try an approach like

<div data-app="myApp" ng-init="name='Sparsh'">
    <div ng-controller="myCtrl">{{firstName}}</div>
    <p>
        Name : <input type="text" ng-model="name"/>
    </p>
    <h1>Hello {{name}}</h1>

</div>
<div data-app="myApp1" ng-init="names=['Jani','Hege','Kai']">
    <ul>
        <li ng-repeat="x in names">{{x}}</li>
    </ul>
</div>

then

var app = angular.module('myApp', []);
var app1 = angular.module('myApp1', []);
app.controller('myCtrl', function ($scope) {
    $scope.firstName = "sparsh";
    $scope.lastName = "khandelwal";
});

var els = document.querySelectorAll('[data-app]');
for (var i = 0; i < els.length; i++) {
    angular.bootstrap(els[i], [els[i].dataset.app]);
}

Demo: Fiddle

@SparshKhandelwal ar you sure it is the same as the fiddle.. because there is no error in the fiddle.. can you post the error message... did you rename ng-app to data-app
i missed that :) now working, but what is difference between data-app and ng-app.? and please elaborate this : 'the automatic and manual initialization of modules '
change it from ng-app to data-app is like removing ng-app .....instead of data-app .. write anything or simply remove it ... everything will work

Collectives™ on Stack Overflow

Angular : Bootstrap giving error in console

2 Answers 2

5 Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Linked

Related