Login/Register
ng-app vs. data-ng-app, what is the difference?
Asked Answered
Solved htmlangularjs
E

6

235

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 ?

Effectual answered 16/5, 2013 at 14:15 Comment(1)
possible duplicate of What is the difference between ng-app and data-ng-app? – Balladist
M
412

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.

Mismatch answered 16/5, 2013 at 14:18 Comment(4)
Would the data- prefix ever prevent an ng attribute from working properly? (e.g., "data-ng-repeat")? – Shae
It seems like such a waste of CPU cycles to manually strip off data- and x-. Why can't the HTML validation rules be changed to accept ng- stuff? – Cist
@DaveAlger: data-* attributes are the way to extend HTML. – Kaja
@DaveAlger: It is a bad idea to do as you said. If there is a lot of famous tools as Angular outside there with different prefix you want that HTML follow them all to add their prefix ?!?! As Krumia said it is the way to extend HTML. – Iscariot
V
66

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

Valvulitis answered 20/6, 2014 at 20:32 Comment(2)
But it does this in only to compare with the directive name. It doesn't change the actual attribute. – Poppied
Good to know about the -,: and _ notation – Mismatch
R
29

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.

Ropable answered 16/5, 2013 at 14:18 Comment(2)
I understand from the specification that data-* would work as it just validates the html. But then why would x-* work ? their ain't any description about this in the specification. – Wagstaff
x-* is reserved for use by the browser. As to your question of WHY x works, either will work as angular specifically makes sure it works for either data/x by coding it into their framework. If you are asking WHY DOES x work for angular, well thats another debate. There are good arguments for either. See this answer on SO: https://mcmap.net/q/119605/-how-are-the-attribute-prefixes-quot-x-quot-and-quot-data-quot-used-in-angularjs The other answer on that page seems to think x is for XHTML, but I'm not sure. See what you can make of that after reading it all. HTML5 spec also says browser/vendor use: w3.org/html/wg/drafts/html/master/single-page.html – Ebonieebonite
K
17

Short Answer:

`ng-model` and `data-ng-model` are same and equivalent!

Why?

  1. reason for: data- prefix
    HTML5 specification expects any custom attribute to be prefixed by data-.

  2. 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:

  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>
Konikow answered 31/3, 2016 at 8:25 Comment(0)
A
2

You can use data-ng-, instead of ng-, if you want to make your page HTML valid.

Alford answered 21/5, 2016 at 12:42 Comment(1)
the OP understands that they can be used interchangeably, but wishes to know why the two are available if they work "the same". I believe an explanation into what makes them different would be a more valuable answer. – Feet
B
1

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.

  1. 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.
  2. Angular normalizes the attribute, but remember, that's on the client, not on the server.
Battlement answered 4/1, 2017 at 21:20 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.