Skip to content Skip to sidebar Skip to footer
Home / Angularjs / Angularjs Module / Javascript / Nested

Nested Modules In Angularjs

Post a Comment
I Have 2 differents AngularJs modules : a widgetContainer and a widget. A widget can be displayed as an independant application or be included into a widgetContainer. A widgetConta

Solution 1:

Don't try to bootstrap both modules. Instead use dependency injection. You only declare one module in your html and you make that module depend upon the other module using angular code. See here: https://docs.angularjs.org/guide/concepts#module

Here's your updated plunkr: http://plnkr.co/edit/DJvzpCoxLRhyBl77S27k?p=preview

HTML: 

<body><divid="childApp"><divng-controller="MainParentCtrl">
      Hello {{name}} !
      <div><divng-controller="MainChildCtrl">
          Hello {{childName}} !
        </div></div></div></div></body>

AngularJS: 

var parentApp = angular.module('parentApp', [])
  .controller('MainParentCtrl', function($scope) {
    $scope.name = 'universe';
  });



var childApp = angular.module('childApp', ['parentApp'])
  .controller('MainChildCtrl', function($scope) {
    $scope.childName = 'world';
  });


angular.element(document).ready(function() {
  angular.bootstrap(document.getElementById('childApp'), ['childApp']);
});

Solution 2:

To achieve expected result, use below 

angular.element(document).ready(function() {
  angular.bootstrap(document.getElementById('parentApp'), ['parentApp','childApp']);

});

http://plnkr.co/edit/4oGw5ROo80OCtURYMVa3?p=preview

Syntax for manual bootstrap is as below irrespective of usage of controllers on elements

angular.bootstrap(element, [modules]);

Post a Comment for "Nested Modules In Angularjs"