I created a directive that let's you do just that called ngModule. 

You can get the source code at:

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

Behind the scenes it does exactly this, just call angular.bootstrap() on 
the element, it just lets you do it declaratively like ngApp does.

On Wednesday, September 19, 2012 4:15:08 AM UTC-4, Pawel Kozlowski wrote:
>
> Sam, 
>
> To have multiple instances of the AngularJS app running on the same 
> page you would have to use manual bootstrap as described here: 
> http://docs.angularjs.org/api/angular.bootstrap 
>
> As you can see you can pass a DOM element to a bootstrap method. 
>
> The bottom line: to use multiple instances of an app you can't use the 
> ng-app directive but instead do a manual bootstrap. 
>
> Cheers, 
> Pawel 
>
> On Wed, Sep 19, 2012 at 8:40 AM, sam <[email protected] <javascript:>> 
> wrote: 
> > Hi, 
> > 
> > I'm new to angular and i wonder how i can do this : 
> > 
> >  - i created an app called "profile" 
> >  - i have a view and a controller 
> > 
> > i create the app like this : 
> > 
> > var myApp = angular.module('Profile', ['ui','autoComplete']); 
> > myApp.value('profileConfig',{ 
> > type : '3', enableTerms : true 
> > }); 
> > 
> > now i want to be able to use the same app on differents places in the 
> same 
> > page with different configuration 
> > 
> > for exemple 
> > 
> > var myApp = angular.module('Profile', ['ui','autoComplete']); 
> > myApp.value('profileConfig',{ 
> > type : '3', enableTerms : true 
> > }); 
> > 
> > and 
> > 
> > var MyOtherApp = angular.module('DifferentProfile', 
> ['ui','autoComplete']); 
> > myApp.value('profileConfig',{ 
> > type : '1', enableTerms : false 
> > }); 
> > 
> > function ProfileController ($scope,$http,profileConfig) { 
> >  ..... 
> > } 
> > 
> > 
> > in my page i have this : 
> > 
> > <div ng-app="Profile"> 
> > <div ng-controller="ProfileController"> 
> > ..... 
> > </div> 
> > </div> 
> > 
> > <div ng-app=" DifferentProfile"> 
> > <div ng-controller="ProfileController"> 
> > ..... 
> > </div> 
> > </div> 
> > 
> > 
> > as you can see both apps share the same controller but have different 
> > configuration using " appanme.value() " 
> > 
> > My first app in the page works great but not the second one . 
> > 
> > So i think i use angular the wrong way to achieve this, could you please 
> > help me and explain the right way to do this ? 
> > 
> > Many thanks 
> > 
> > 
> > -- 
> > You received this message because you are subscribed to the Google 
> Groups 
> > "AngularJS" group. 
> > To post to this group, send email to [email protected]<javascript:>. 
>
> > To unsubscribe from this group, send email to 
> > [email protected] <javascript:>. 
> > Visit this group at http://groups.google.com/group/angular?hl=en. 
> > 
> > 
>
>
>
> -- 
> Question? Send a fiddle 
> (http://jsfiddle.net/pkozlowski_opensource/Q2NpJ/) or a plunk 
> (http://plnkr.co/) 
> Need help with jsFiddle? Check this: 
> http://pkozlowskios.wordpress.com/2012/08/12/using-jsfiddle-with-angularjs/ 
>
> Looking for UI widget library for AngularJS? Here you go: 
> http://angular-ui.github.com/ 
>

-- 
You received this message because you are subscribed to the Google Groups 
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Reply via email to