angular.bootstrap运行多个角度应用程序

This is NOT a Twitter Bootstrap question...

这不是Twitter Bootstrap问题......

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!

1 个解决方案

#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:

其中'firstapp'和'secondapp'是模块/应用程序名称,'firstapp-id'和'secondapp-id'是每个应用程序(或您最喜欢的DOM元素)的容器div的id。只需以通常的方式定义您的应用:

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