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

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


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.


From Angularjs Documentation

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


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.