Is there any way to use two ng-app's like parent and clild app in AngularJs?

Question

HTML

chech out the below sample html, I require something like this.

<div id="parentApp" ng-app="parentApp" ng-cloak="" ng-controller="mainController">
    <div id="someContent">
        {{$scope.parentName}}
        ***some parent app actions***
    </div>
    <div id="childApp" ng-app="childApp">
        <div id="someContent" ng-controller="secondController">
            {{$scope.childName}}
            ***some child app actions***
        </div>
    </div>
</div>

Script

2 simple app and controllers for better understanding purpose.

var parentApp = angular.module('parentApp', []);
parentApp.controller('mainController', function($scope, $http) {
    $scope.parentName = 'Parent!!'
});

var childApp = angular.module('childApp', []);
childApp.controller('secondController', function($scope, $http) {
    $scope.childName = 'Child!!'
});

Possible duplicate of [AngularJS Multiple ng-app within a page](https://stackoverflow.com/questions/18571301/angularjs-multiple-ng-app-within-a-page) — Stanislav Kvitash, Sep 05 '17 at 15:19

score 1 · Answer 1 · answered Sep 05 '17 at 13:34

You cannot use 2 ng-app attribute on a page.

However, looking at your requirement, I think you need to use 2 controllers and do some stuff with it while maintaining the appearance of parent-child in the HTML structure. To, do that you can make use of the angular.bootstrap method.

So, you can modify the html as below:

<div id="parentApp" ng-cloak="" ng-controller="mainController">
    <div id="someContent">
        {{$scope.parentName}}
        ***some parent app actions***
    </div>
    <div id="childApp" ng-app="childApp">
        <div id="someContent" ng-controller="secondController">
            {{$scope.childName}}
            ***some child app actions***
        </div>
    </div>
</div>

And in your code, you can initialize it as below:

var parentAppDivId = document.getElementById('parentApp');
angular.bootstrap(parentAppDivId, ['parentApp']);
var parentApp = angular.module('parentApp', []);
parentApp.controller('mainController', function($scope, $http) {
    $scope.parentName = 'Parent!!'
});

var childAppDivId = document.getElementById('childApp');
angular.bootstrap(childAppDivId, ['childApp']);
var childApp = angular.module('childApp', []);
childApp.controller('secondController', function($scope, $http) {
    $scope.childName = 'Child!!'
});

score 0 · Answer 2 · answered Sep 05 '17 at 15:21

If you already have two separate apps and are trying to leverage parts of one in another app, you can inject the module from one app into another. It's the the same structure as you've outlined above, but it will make everything from the first app available in the second app.

angular.module('childApp', ['parentApp'])...

Is there any way to use two ng-app's like parent and clild app in AngularJs?

2 Answers2