[AngularJs] Why not two ng-app

1,328 views
Skip to first unread message

Hao Deng

unread,
Aug 5, 2012, 9:03:59 PM8/5/12
to ang...@googlegroups.com
Hello:
Angular.js insist that each html page has only one ng-app. Does
any body knows the reason?
For me I think this is an unnecessary restriction. Allowing multiply
ng-apps on one html page seemed
to be very useful. For example, if I need to use directive a from
module a, and directive b from module b ,
I can put both ng-app and use them.

Regards.
Hao

Andy Joslin

unread,
Aug 5, 2012, 9:07:39 PM8/5/12
to ang...@googlegroups.com
Hi Hao,

Angular does not restrict one ng-app per page, but it does restrict one per tag.  You don't have to put it on the html tag.

<html>
<body>
<div ng-app="appOne"></div>
<div ng-app="appTwo"></div>

Felipe Almeida Lessa

unread,
Aug 5, 2012, 9:09:18 PM8/5/12
to ang...@googlegroups.com
That's nice to hear but then the docs are clearly wrong. From
http://docs.angularjs.org/api/ng.directive:ngApp:

"Use this directive to auto-bootstrap on application. Only one
directive can be used per HTML document. The directive designates the
root of the application and is typically placed ot the root of the
page."

Cheers,

--
Felipe.

Dan Doyon

unread,
Aug 5, 2012, 9:18:31 PM8/5/12
to ang...@googlegroups.com
I tried this recently and seems only first ng-app works, if someone is able to produce a fiddle to prove otherwise, I'd like to see it (really)..

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

Hao Deng

unread,
Aug 5, 2012, 10:02:14 PM8/5/12
to ang...@googlegroups.com
I tried myself, only the first app works.
ng-model in the second ng-app has no effect.

Andy Joslin

unread,
Aug 5, 2012, 10:40:28 PM8/5/12
to ang...@googlegroups.com
Really? I've read before it works with multiple app tags.

After some fiddling (literally o-:), I was able to get it to work with bootstrap, though: http://jsfiddle.net/Gjyaq/


Hao Deng

unread,
Aug 5, 2012, 10:58:13 PM8/5/12
to ang...@googlegroups.com
It works! great thanks. 


On Sun, Aug 5, 2012 at 10:40 PM, Andy Joslin <andyt...@gmail.com> wrote:
Really? I've read before it works with multiple app tags.

After some fiddling (literally o-:), I was able to get it to work with bootstrap, though: http://jsfiddle.net/Gjyaq/


Dan Doyon

unread,
Aug 6, 2012, 1:53:45 AM8/6/12
to ang...@googlegroups.com
cool!

Luis Perez

unread,
Apr 6, 2014, 2:45:57 PM4/6/14
to ang...@googlegroups.com
Instead of a invoking bootstrap directly from you code it would be nice to create a directive like ngApp instead.

That way you keep your code and HTML decoupled.

I did just that, I created a directive called ngModule, you can get the code from:


Just like you did, behind the scenes it just calls angular.bootstrap().
Reply all
Reply to author
Forward
0 new messages