Reputation: 39926
I'm currently looking at this start tutorial video for angular.js
At some moment (after 12'40"), the speaker states that the attributes ng-app
and data-ng-app=""
are more or less equivalent inside the <html>
tag, and so are ng-model="my_data_binding
and data-ng-model="my_data_binding"
. However The speaker says the html would be validated through different validators, depending on which attribute is used.
Could you explain the difference between the two ways, ng-
prefix against data-ng-
prefix ?
Upvotes: 235
Views: 87254
Reputation: 3733
reason for: data-
prefix
HTML5 specification expects any custom attribute to be prefixed by data-
.
reason for: both ng-model
and data-ng-model
are same and equivalent.
AngularJS Document - Normalization
Angular normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g.ngModel
). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g.ng-model
).
The normalization process is as follows:
- Strip
x-
anddata-
from the front of the element/attributes.- Convert the
:
,-
, or_
-delimited name tocamelCase
.
<div ng-controller="Controller">
Hello <input ng-model='name'> <hr/>
<span ng-bind="name"></span> <br/>
<span ng:bind="name"></span> <br/>
<span ng_bind="name"></span> <br/>
<span data-ng-bind="name"></span> <br/>
<span x-ng-bind="name"></span> <br/>
</div>
Upvotes: 17
Reputation: 11
if you want to manipulate html or html-fragments on your server before serving it to the browser, you most definitely want to be using data-ng-xxx attributes instead of just ng-xxx attributes.
Upvotes: 1
Reputation: 88
You can use data-ng-, instead of ng-, if you want to make your page HTML valid.
Upvotes: 2
Reputation: 23662
Good question. The difference is simple - there is absolutely 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 to answer your question, use data-ng-app
if you would like validating your HTML to be a bit easier.
Fun fact: You can also use x-ng-app
to the same effect.
Upvotes: 411
Reputation: 661
Angular normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).
The normalization process is as follows:
Strip x- and data- from the front of the element/attributes. Convert the :, -, or _-delimited name to camelCase. Here are some equivalent examples of elements that match ngBind:
based on above statement below all are valid directives
1. ng-bind
2. ng:bind
3. ng_bind
4. data-ng-bind
5. x-ng-bind
Upvotes: 66
Reputation: 1797
The differences lies in the fact that custom data-*
attributes are valid in the HTML5 specification. So if you need your markup to be validated, you should use them rather than the ng
attributes.
Upvotes: 29