CODEWITHSUNDEEP
angularjs
MattDavis
MattDavis

Reputation: 5178

Placement of the ng-app directive (html vs body)

I recently reviewed the code for a webapp built with angular and found that it was written with the ng-app="myModule" directive placed on the <body> tag. When learning angular, I've only ever seen it used on the <html> tag, as recommended by the angular docs here, here, and in their tutorial.

I've explored this a bit on my own and found SO questions, notably this one and similarly this one, that discuss loading multiple modules for a page. However, this technique different from my case, as it involves placing ng-app on elements within the body and using manual bootstrapping to run two angular apps at the same time.

As far as I can tell, there is no difference at runtime between an app with ng-app on <html> or <body>. As I understand it, ng-app designates the root of an angular application, so placement of it on the <body> would cut <head> out of angular's scope, but I can't think of any major way this would affect things. So my question is: What are the technical difference between placing ng-app on one of these tags instead of the other?

Upvotes: 104

Views: 38572

Answers (3)

noypi
noypi

Reputation: 991

AngularJS will bootstrap the first ng-app it finds! That's it. If you have more than one ng-app, it will only process the first one. If you want to bootstrap any other element use angular.bootstrap()

The value of the ng-app attribute is a module that have been created using:

angular.module("module_name", [])

A module defines how angular will bootstrapped because we do not have a main() method unlike other programming languages. If ng-app's value is empty, then it defaults to use 'ng', the default module.

It was said to be slightly faster because angular will process all of the elements inside the element where ng-app was. But I doubt slightly part because the difference will be hardly noticeable at all, unless you have a very very bulky DOM.

If you want examples here: http://noypi-linux.blogspot.com/2014/07/angularjs-tutorials-understanding.html

Upvotes: 4

Peter Drinnan
Peter Drinnan

Reputation: 4532

I was on a team working on a legacy app and found it best to use the ng-app tag in a div that is used as a wrapper to isolate new code from the legacy code.

We discovered this while working on the app that was heavily relying on jqGrid and Dojo.

When we added ng-app to the head tag it blew up the site, but when we used a wrapper we could use Angular with no problems.

Upvotes: 21

Harry Dobrev
Harry Dobrev

Reputation: 7706

There is no big difference where you put ng-app.

If you put it on <body> then you have a smaller scope for AngularJS which is slightly faster.

But I have used ng-app on the <html> for manipulating the <title>.

Upvotes: 145

Related Questions