Menu
For AngularJS there is no difference between ng-app and data-ng-app or ng-controller and data-ng-controller or ng-model and data-ng-model because while compiling HTML page, AngularJS strips data- or x- prefix. Find the URL for reference.
Definition and Usage. The ng-app directive tells AngularJS that this is the root element of the AngularJS application. All AngularJS applications must have a root element. You can only have one ng-app directive in your HTML document. If more than one ng-app directive appears, the first appearance will be used.
AngularJS DirectivesThe ng-app directive initializes an AngularJS application. The ng-init directive initializes application data. The ng-model directive binds the value of HTML controls (input, select, textarea) to application data. Read about all AngularJS directives in our AngularJS directive reference.
The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular. bootstrap instead. AngularJS applications cannot be nested within each other.
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.
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/
You can declare the angular namespace <html xmlns:ng="http://angularjs.org" ng-app>
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.
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>
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