Multiple instance of the same app

[sam]

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

[Pawel Kozlowski]

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

> --
> 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.
>
>



--
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/

[samuel merlet]

Thanks Pawel !

It works like a charm .

    angular.module('MyApp1', ['ui','auto'])

     .value('profileConfig',{

      type : '1',

      enableTerms : true

    });

    angular.bootstrap($('#App1'),['MyApp1']);

    angular.module('MyApp2', ['ui','auto'])

     .value('profileConfig',{

      type : '2',

      enableTerms : false

    });

    angular.bootstrap($('#App2'),['MyApp2']);

perfect ! 

When you say i can't use ng-app directive, you mean that if i have a different app to run i will also have to bootstrap it manually ?

So there is no way to use ng-app for many apps with the same controller and differents configurations ( maybe i don't use angular the right way ???  or is it common to have mutiple apps with same controller ? )

Thanks again

[Peter Bacon Darwin]

The ng-app directive is just a short-cut tool for automatically running the bootstrap code.  You can happily run the bootstrap and point it to different parts of your html at document load time to create multiple apps.  The problem is simply that you can only have one of this directive on each HTML page.

[samuel merlet]

OK , thanks to both of you ..

I definitely love love angular.

[Marc Cawood]

Following up on controller re-use and having multiple instances of an application. If I code like this:

var app = angular.module('myApp', []);

app.filter(...);

app.factory(...);

app.controller('myCtrl', ...);

then my filter, my service and my controller are all tied to app. How would app2 re-use all that or do I need to duplicate all the code?

var app2 = angular.module('myApp2', []);

app.filter(...); // How to refer back to app.filter?

app.factory(...); // How to refer back to my service above?

app.controller(...); // Can I skip this and do <div ng-app="myApp2" ng-controller="myCtrl">?

If I use named functions as follows it works but seems inelegant (and pollutes):

function dateISO() {

  return function(val) {

    return new Date(val).toISOString().substr(0, 10);

  };

}

app.filter('dateISO', dateISO);

app2.filter('dateISO', dateISO);

// etc. for services...

[Pawel Kozlowski]

Hi!

On Fri, Dec 28, 2012 at 2:11 PM, Marc Cawood <caw...@gmail.com> wrote:
> How would app2 re-use all that or do I need to duplicate all the code?
>
> var app2 = angular.module('myApp2', []);

Would

var app2 = angular.module('myApp2', ['myApp']);

work for you?

Cheers,
Pawel

[Luis Perez]

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.