angular.js directives in different modules

angularjs

Solution

There is a solution to bootstrap several angular modules on a page programmatically ( docs ).

You have to remove `ng-app` attribute from html.

Define several modules:

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

var app2 = angular.module('myApp2', []);

app1.controller('MainCtrl', function($scope) {
  $scope.name = 'App1';
});

app2.controller('MainCtrl', function ($scope) {
  $scope.name = 'App2';
})

And then in index.html do:

  <html>
  <head></head>
  <body>
    <!-- Module 1 -->
    <div id="myApp1">
      <div ng-controller="MainCtrl">
        <h1>Hello {{name}}</h1>
      </div>
    </div>
    <!-- Module 2 -->
    <div id="myApp2">
      <div ng-controller="MainCtrl">
        <h1>Hello {{name}}</h1>
      </div>
    </div>
    <!-- Bootstrap modules -->
    <script>
      angular.element(document).ready(function() {
          angular.bootstrap(document.getElementById('myApp1'), ['myApp1']);
          angular.bootstrap(document.getElementById('myApp2'), ['myApp2']);
     });
    </script>
  </body>
  </html>

Here is a working plnkr with this solution.

Problem

I am confused. If I can use `ng-app` only once per page how can I use directives that sit in different modules, in different .js files. Look: ``` <script src='mainModule.js'/> <script src='secondModule.js'/> <body ng-app='mainModule'> <my-thingy/> <div> <other-thingy/> </div> </body> mainModule.js: angular.module("mainModule",[]).directive("myThingy",function(){ ... }) secondModule.js: angular.module("secondModule",[]).directive("otherThingy",function(){ ... }) ``` So, how do I now point to the secondModule on the page, without referencing it from mainModule.js

Original source