How to use 2 angularjs apps in same html page?

Question

Here is the code to reproduce, where 2nd app fails:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<div ng-app="myApp1" ng-controller="myCtrl1">
{{ firstName + " " + lastName }}
</div>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});

var app1 = angular.module("myApp1", []);
app1.controller("myCtrl1", function($scope) {
    $scope.firstName = "John1";
    $scope.lastName = "Doe1";
});

</script>

</body>
</html>

Also I have tried to use angular.bootstrap with no luck like suggested here

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<div ng-app="myApp1" ng-controller="myCtrl1">
{{ firstName + " " + lastName }}
</div>


<script>

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});

angular.bootstrap(document, ['myApp']);


var app1 = angular.module("myApp1", []);

app1.controller("myCtrl1", function($scope) {
    $scope.firstName = "John1";
    $scope.lastName = "Doe1";
});

angular.bootstrap(document, ['myApp1']);

</script>

</body>
</html>

Update:

Working example:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div id="firstApp" ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<div id="firstApp1" ng-app="myApp1" ng-controller="myCtrl1">
{{ firstName + " " + lastName }}
</div>


<script>

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});

let appEl1 = document.getElementById("firstApp");
angular.bootstrap(appEl1, ['myApp']);


var app1 = angular.module("myApp1", []);

app1.controller("myCtrl1", function($scope) {
    $scope.firstName = "John1";
    $scope.lastName = "Doe1";
});

let appEl2 = document.getElementById("firstApp1");
angular.bootstrap(appEl2, ['myApp1']);

</script>

</body>
</html>

Possible duplicate of AngularJS Multiple ng-app within a page — NTP
– NTP, Commented Jan 25, 2018 at 15:56
Inject one app inside other app.. in other words, make one root app. will work. — Avnesh Shakya
– Avnesh Shakya, Commented Jan 25, 2018 at 15:57

Vandesh · Accepted Answer · 2018-01-25 15:59:37Z

1

The problem is you are bootstrapping both apps on document. It needs to be on the element(div in your case) that you want it to be according to angular.bootstrap documentation here

Eg:

<div id="firstApp">

let appEl1 = document.getElementById("firstApp");
angular.bootstrap(appEl1, ['myFirstApp']);

answered Jan 25, 2018 at 15:59

Vandesh

6,9642 gold badges31 silver badges38 bronze badges

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

Comments

Aleksey Solovey · Accepted Answer · 2018-01-25 15:59:42Z

0

You need to use

angular.bootstrap(document.getElementById("appID"), ['myApp1']);

with

<div id="appID" ng-app="myApp1" ng-controller="myCtrl1">

This will bootstrap it manually.

(You also had a typo(?) in your first case with registering a controller: app.controller("myCtrl1" should be app1.controller("myCtrl1")

answered Jan 25, 2018 at 15:59

Aleksey Solovey

4,1663 gold badges18 silver badges34 bronze badges

Collectives™ on Stack Overflow

How to use 2 angularjs apps in same html page?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related