Multiple ng-apps : booster rockets for re-usable design

ng multiple apps with booster
ng multiple apps with booster

When i started learning angular , I just happened to take ng-app directive for granted. And innocently so, thought since Angular has been marketed as a ‘Super heroic JS framework’ that works best with Single page applications, it must be using not more than one ng-app. Why else would it need 2 apps and what could it possibly do with it ?

All the students get along believing a single ng-app would suffice for the entire project. When it gets real dirty with the directives it is too much to expect the students to think of design patterns.

At the end of it having to see the miraculous app work with absolutely ZERO impedance mismatch is a wonderful feeling. But then when it comes down to thinking if you can really use this as a piece all over again without having to re-write it, is the point where you can start appreciating this post better.

I’m not doubting your abilities to finding patterns , believe me, no presumptions of your cognizance that there could be patterns here. I’m perhaps just too excited to stumble on this particular personal accidental workplace discovery.

Angular is just too awesome not to leave out room for extension. The very idea of having to teach HTML some new tricks and make it come alive is so extraordinary that things to follow are bound to hold us in awe!

One starts to think , directives , yes! Directives of course are plug and play.(With small tweaking though, need to remove all the app bindings) But what happens to providers ?  controllers ? – perhaps not !!  It is not so easy to make them re-usable. Can you really pluck out your controllers from one project and just place them with a new application ? – Sounds crazy , but then not really. 

We need apps to be designed independently , perhaps based on functionality but we need something as a lowest indivisible unit of the webapp that can carried ahead as a re-usable unit

Coming to think of it , ng-app seems to be the best , after all all the controllers, directives, routes are all bound to the module.

But then unfortunately this is not possible. Angular does not allow you to cascade apps as done below.



Angular apps (modules) cannot be cascaded ! – angular just refuses to have an app underneath another one. Logically so yes that would make sense. Else we are just giving way to much of deluge of scopes.

What then can be brilliantly done is :

app referencing is rather a smarter way
app referencing is rather a smarter way

And now that you have one app referencing the other, apps like this can be re-usable and plug and play. Go ahead divide your functionality into smaller pieces and enjoy the goodness of Angular!!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

Blog at

Up ↑

%d bloggers like this: