What is the difference between ng-app and data-ng-app?
AngularjsAngularjs DirectiveAngularjs Problem Overview
I have begun to learn about AngularJS and am confused about what the differences are between the ng-app and data-ng-app directives.
Angularjs Solutions
Solution 1 - Angularjs
Most of these answers are simply saying makes template valid HTML, or HTML Validator Compliant, without explaining what THOSE terms mean, either.
I do not know for sure, but I'm guessing that these terms apply to HTML validation programs that scan your code for standards compliance - kind of like lint. They do not recognize ng-app as a valid attribute. They expect non default HTML attributes to be prefaced with
data-attribute_name_here.
So, the creators of AngularJS have created alternate names for their directives that include the data- in front of them so that HTML validator programs will "like" them.
Solution 2 - Angularjs
None in terms of the runtime behavior, those are just different styles of naming directives as described here: http://docs.angularjs.org/guide/directive
> Directives have camel cased names such as ngBind. The directive can be > invoked by translating the camel case name into snake case with these > special characters :, -, or _. Optionally the directive can be > prefixed with x-, or data- to make it HTML validator compliant. Here > is a list of some of the possible directive names: ng:bind, ng-bind, > ng_bind, x-ng-bind and data-ng-bind.
As you can see from reading this the data- can be used to make your HTML pass HTML validator tests/
Solution 3 - Angularjs
You can declare the angular namespace <html xmlns:ng="http://angularjs.org" ng-app>
Solution 4 - Angularjs
In modern browsers there is no difference, but in older IEs, they won't work unless you declare an XML namespace defining it.
There is also a validation difference in that ng-app is not valid XHTML, and will cause your webpage to fail HTML validations. Angular allows you to prefix its directives with data- or x- to allow it to validate.
Solution 5 - Angularjs
You can use data-ng-, instead of ng-, if you want to make your page HTML valid.
This will throw an error
<div ng-app="">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
This won't throw an error
<div data-ng-app="scope" data-ng-init="name='test'">
<p>Input something in the input box:</p>
<p>Name: <input type="text" data-ng-model="name"></p>
<p data-ng-bind="name"></p>
</div>
Solution 6 - Angularjs
The basic difference between these two terms is that data-ng-app validates the HTML while the latter don't.Functionality remains the same. For more reference you can try w3Validator.
Solution 7 - Angularjs
Absolutely there is no difference between the two, except that certain HTML5 validators will throw an error on a property like ng-app, but they don't throw an error for anything prefixed with data-, like data-ng-app. So using data- prefix with our angular directives is good.
Even you can make use angular directives in below mentioned ways ng-bind, ng:bind, ng_bind, data-ng-bind, x-ng-bind