the Nested Modules in AngularJS

Question

Background

I have N angular modules. One of them it is the root container that bootstrapped on and exists whole page life cycle. All other N-1 are games that nested inside of the page and need to be loaded dynamically and unloaded (How to unload angularjs modules) as well.

.------------------.
|Container         |
|  .----------.    |
|  |Game      |    |
|  |          |    |
|  |          |    |
|  `----------`    |
`------------------`

Details

Each game - is the same way angular-module that has as a dependency main container to do some API interaction.

Example

After some experiments I've found that in Angularjs 1.1.5 nested modules almost(!) works right: http://plnkr.co/edit/kJao7o

But with new one Angularjs (1.2.0-rc2) is broken: http://plnkr.co/edit/ZyhbRu

Why Almost?

This example still raises exception:

Error: Argument 'GameCtrl' is not a function, got undefined

I've tried to use ng-include to prevent auto-injection from AngularJS. But still have same problem (http://plnkr.co/edit/EM1MbB);

What is wrong?

I know that it's impossible to use the nested ng - app on the same page http://docs.angularjs.org/api/ng.directive:ngApp

How?

But how it is possible to use more than one nested angular modules on the same page (with its own controllers)?

Bug?

And I don't know is it just was temporary bug or Angular team decide to avoid of nested modules. Is there anybody know something about that?

Bad idea?

Or, if using modules for such issue is bad idea - what is the best decision for that?

The reason of using modules in that App

• Isolation of name's scope (to avoid name's collision). I can guarantee that any of two or more future games won't use the same ctrls names or something;
• Going to unload modules (I don't know is it possible in AngularJs - but I'm going to try);

Answer 1

Oh! I just realized you idea. Actually you have incorrect understanding of Angular building components.

1. Angular module is just a logical wrapper for controllers, directives, factories and etc. For example you would have module 'main' and several submodules 'moduleA' and 'moduleB'

They doesn't have any relation to the modules on a markup, it's just a logical unit in your app.

1. In your example you hopefully mean scopes. You may have several scopes in your app and they can be inhireted or have children. And in this case you can load or unload entity that created the scope

Look at the official developer guide for more details.