angular.bootstrap to run multiple angular apps

Question

This is NOT a Twitter Bootstrap question...

I have a use case that requires the loading of separate angular applications.

Based on several stack overflow questions and this google thread, it's doable. However, I can't get it to work.

Looking at the documentation:

http://docs.angularjs.org/api/angular.bootstrap

It looks like you need to provide the element (how to get a handle on the element?), and then how to tie it back to config, controllers, etc. And how would this work with routes? Seems if one app uses otherwise and the other uses otherwise, the second would just override the first?

Thanks!

Answer 1

to grab references to your app(s), you can do something along the lines of:

var first = document.getElementById('firstapp-id');
var second = document.getElementById('secondapp-id');

angular.bootstrap(angular.element(first), ['firstapp']);
angular.bootstrap(angular.element(second), ['secondapp']);

where 'firstapp' and 'secondapp' are module/app names, and 'firstapp-id' and 'secondapp-id' are the id's of the container div's for each app (or your favorite DOM element). just define your apps in the usual manner:

var firstapp = angular.module('firstapp', []);
var secondapp = angular.module('secondapp', []);