Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

angular.bootstrap to run multiple angular apps

Tags:

angularjs

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!

like image 360
Robert Christian Avatar asked May 30 '13 21:05

Robert Christian


1 Answers

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', []);
like image 69
UnicodeSnowman Avatar answered Oct 04 '22 21:10

UnicodeSnowman