ng-app V/S data-ng-app in AngularJS

StackOverflow https://stackoverflow.com/questions/21110450

Question

In AngularJS when using ng-app: ng-app found in the document will be used to define the root element to auto-bootstrap as an application.

In some of the application it is being used as data-ng-app.

Is there any difference in both of the following declaration, If Yes what & If No then which one is significant and why ?

1.

 <body ng-app>
     <p>{{ 1 + 2 }}</p>
 </body>

2.

 <body data-ng-app>
     <p>{{ 1 + 2 }}</p>
 </body>
Was it helpful?

Solution

Both and are the same except for the fact that if you want your template/code to be according to be HTML compliant and follow the best practices. Use data-ng-app.

This is what the official documentation quotes:

"Best Practice: Prefer using the dash-delimited format (e.g. ng-bind for ngBind). If you want to use an HTML validating tool, you can instead use the data-prefixed version (e.g. data-ng-bind for ngBind). The other forms shown above are accepted for legacy reasons but we advise you to avoid them."

Hope that answers your question.

Cheers!

OTHER TIPS

See the answer:

ng-app vs. data-ng-app, what is the difference?

Only diffrence regarding html5 validation

ng-app isn't strictly valid html. Custom attributes should be prefixed with data- to be valid.

So angular added this syntax so users could still have valid html. (Knockout also uses data- attributes.) There is absolutely no difference in functionality.

Source: w3.org - custom data attributes

ng-app and data-ng-app both are similar to each other, the only difference between them is sometimes HTML validators will show an error while using ng-app. so that time you can use data-ng-app.

note: x-ng-app also have the same property. You can use x-ng-app too instead of using data-ng-app.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top