Menu
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?
304
Typically ng-app directives should be placed at the root of an HTML document e.g. <html> or <body> tag, so that it can control the entire DOM hierarchy. However, you can place it in any DOM element.
All AngularJS applications must have a root element. You can only have one ng-app directive in your HTML document.
For running multiple applications in the HTML, one should use the angular. bootstrap method. Do not nest AngularJS applications with each other. Transclusions directive should not be used on the same element as ngApp.
The ng-app directive defines the root element of an AngularJS application and starts an AngularJS Application. The ng-app directive will auto-bootstrap (automatically initialize) the application when a web page is loaded. It is also used to load various AngularJS modules in AngularJS Application.
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>.
196
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
