AngularJS Multiple ng-app within a page

Question

I have just started learning Angular JS and created some basic samples however I am stuck with the following problem.

I have created 2 modules and 2 controllers.

Answer 1

You can use angular.bootstrap() directly... the problem is you lose the benefits of directives.

First you need to get a reference to the HTML element in order to bootstrap it, which means your code is now coupled to your HTML.

Secondly the association between the two is not as apparent. With ngApp you can clearly see what HTML is associated with what module and you know where to look for that information. But angular.bootstrap() could be invoked from anywhere in your code.

If you are going to do it at all the best way would be by using a directive. Which is what I did. It's called ngModule. Here is what your code would look like using it:

    
        
        
        
    
    
        

            
Module A, B
            

                {{name}}
            
            

                {{name}}
            
        

        

            
Just Module B
            

                {{name}}
            
        
    

You can get the source code for it at:

http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/

It's implemented in the same way as ngApp. It simply calls angular.bootstrap() behind the scenes.