ng-app vs. data-ng-app, what is the difference?
HtmlAngularjsHtml Problem Overview
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 ?
Html Solutions
Solution 1 - Html
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.
Solution 2 - Html
> 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
- ng_bind
- data-ng-bind
- x-ng-bind
**
Solution 3 - Html
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.
Solution 4 - Html
Short Answer:
ng-model and data-ng-model are same and equivalent!
Why?
-
reason for:
data-prefix
HTML5 specification expects any custom attribute to be prefixed bydata-. -
reason for: both
ng-modelanddata-ng-modelare 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:
>
> 1. Strip x- and data- from the front of the element/attributes.
>
> 2. Convert the :, -, or_-delimited name to camelCase.
>
>
> For example
> the following forms are all equivalent and match the ngBind directive:
>
<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>
Solution 5 - Html
You can use data-ng-, instead of ng-, if you want to make your page HTML valid.
Solution 6 - Html
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.
- It makes your html valid, meaning it can be used by html (server based) parsers like domdocument (php) or others. These parsers often fail on not well formed html.
- Angular normalizes the attribute, but remember, that's on the client, not on the server.