5

I have looked on the Google groups, angularjs.org as well as some serious Googling but I am not finding any clear examples or explanation for what I'm trying to do.

What I am trying to do is break my application into views using multiple modules. I know from reading online you need to manually bootstrap but I'm still not getting it write

I currently have 2 modules "thermostatApp" and "PeopleApp", and I want to attach them to their own containers shown below:

<div id="thermostatApp_container">
    <div data-ng-include="'modules/thermostat/thermostat.html'"/> 

  </div> 

  <div id="peopleApp_container">
    <div data-ng-include="'modules/people/people.html'"/> 

  </div>

what I was trying to do was to bootstrap to each container element like so:

angular.element($('#peopleApp_container')).ready(function() {
         angular.bootstrap($('#peopleApp_container'), ['peopleApp']);
       });

 angular.element($('#thermostatApp_container')).ready(function() {
         angular.bootstrap($('#thermostatApp_container'), ['thermostatApp']);
       });

This isn't working for me, I know you can attach multiple modules using an array of modules but How do you specif a element to bootstrap it to? Is it possible to do what I'm describing? If not what is the best way to approach it? I do want to keep modules as separated as possible.

jonnie
  • 12,260
  • 16
  • 54
  • 91

1 Answers1

7

I feel very Silly! I did't need to attach to specific elements, I just attached to the document and passed an array of modules like so:

angular.element(document)).ready(function() {
    angular.bootstrap(document, ['peopleApp','thermostatApp']);
});
jonnie
  • 12,260
  • 16
  • 54
  • 91
  • 1
    Great Q&A, jonnie. I just have 2 questions though: **1)** *Does this change the Scoping of your modules (or anything else) is any way -- namely, regarding Events?* **2)** *Were you ever able to bootstrap to specific containers? If so, did this alter Scoping in any way?* – Cody Mar 25 '16 at 20:30