CODEWITHSUNDEEP
javascriptangularjs
sparsh610
sparsh610

Reputation: 1601

Angular : Bootstrap giving error in console

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.

Upvotes: 0

Views: 327

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388406

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

Upvotes: 0

Omri Aharon
Omri Aharon

Reputation: 17064

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.

Upvotes: 1

Related Questions