How do I bootstrap multiple modules to display on same page with Angular.js

Question

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.

So you wanted these two templates to be on the same page?

CodyBugstein
– CodyBugstein

2014-10-31 06:41:50 +00:00
Commented Oct 31, 2014 at 6:41 — CodyBugstein
– CodyBugstein, Commented Oct 31, 2014 at 6:41

jonnie · Accepted Answer · 2013-07-24 14:49:23Z

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']);
});

edited Jul 24, 2013 at 14:49

answered Jul 24, 2013 at 14:37

jonnie

12.8k17 gold badges58 silver badges95 bronze badges

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

1 Comment

Cody Over a year ago

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?

Collectives™ on Stack Overflow

How do I bootstrap multiple modules to display on same page with Angular.js

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related