How to use multiple modules from ng-app

3,825 views
Skip to first unread message

Hao Deng

unread,
Jul 29, 2012, 11:35:42 AM7/29/12
to ang...@googlegroups.com
Hello there: 
    I'm still new to Angular.js so my question may sound weird. 
    
    Suppose I wrote 2 modules with 1 directive in each : 
    module1 : directive1 
    module2 : directive2

I want to use both directive1 & 2 in one page( ng-app),  how can I do this? 
<html ng-app='module?'>
<directive1 />
<directive2 />


Am I missing something here?  Should I create a new module to expose directive1&2? 

Thanks in advance!
 

Pawel Kozlowski

unread,
Jul 29, 2012, 11:52:46 AM7/29/12
to ang...@googlegroups.com
hi Hao!

You've got 2 options:

(1) Create a new module ('app'?) that would have dependencies on 2
modules you've mentioned. Then you can use this new module in ng-app.
(2) Use manual bootstrapping
(http://docs.angularjs.org/api/angular.bootstrap) where you can pass
an array of modules

I'm almost sure that I saw a way of using ngApp with multiple module
names but can't find it in the doc, will check angular sources /
experiment a bit and will send a jsFiddle in case I can find a way to
use ngApp with multiple modules. But I hope that the above will allow
you to see options.

Cheers,
Pawel
> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to
> angular+u...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular?hl=en.
>
>

Pawel Kozlowski

unread,
Jul 29, 2012, 12:05:42 PM7/29/12
to ang...@googlegroups.com
Ok, so, here are the jsFiddles:

For the option (1): http://jsfiddle.net/pkozlowski_opensource/T86qf/1/
It looks like you can't init multiple modules inside ngApp (or at last
I can't find how to do it....)

I would suggest going with option (1), manual bootstrap is not worth it IMHO.

Hope this helps,
Pawel

Luis Perez

unread,
Apr 6, 2014, 3:52:37 PM4/6/14
to ang...@googlegroups.com
The manual bootstrap would work. The only problem is you would lose all the benefits of directives. First with the bootstrap approach you need a reference to the HTML element, which means your now coupling your code. Also with directives you can clearly see what module your HTML is associate it with, if that association is burried in your code it's not as clear.

For these reasons I created a directive called ngModule that does exactly this, you can get the source code here:

Reply all
Reply to author
Forward
0 new messages