What is the difference between ng-app and data-ng-app?

Question

I have begun to learn about AngularJS and am confused about what the differences are between the ng-app and data-ng-app directives.

possible duplicate of [ng-app vs. data-ng-app, what is the difference?](http://stackoverflow.com/questions/16589853/ng-app-vs-data-ng-app-what-is-the-difference) — chenrui, Feb 03 '15 at 18:10
Your application is not gonna get impacted and Angular will work as expected even if you use ng-app or data-ng-app but as mentioned by @user2289659 making use of data-* is introduced custom attribute standard from HTML5 onwards — Shujaath Khan, Feb 24 '16 at 09:04

score 124 · Answer 1 · edited May 19 '16 at 15:27

124

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.

edited May 19 '16 at 15:27

akxer

132
9

answered Nov 07 '13 at 03:15

Kirby L. Wallace

1,249
1
8
2

4

+1 for the "Ok. So, what does 'validator compliant' mean, anyway?" approach. If you had done the research you would find out that you are guessing mostly right. =) – slacktracer Nov 24 '13 at 17:23
22

Valid HTML isn't for HTML validators. Browsers parse HTML. If you start deviating from the HTML specification, there's no guarantee that your HTML will be parsed correctly. – Blender Jan 12 '14 at 10:37
1

Yes, the validators are a means to the end. The goal is to make your web pages as close as possible to the specs, which maximises the number of browsers - old, present, and future - in which your app will actually work as expected. In the case of "data-*", there's also the risk browsers could introduce the same attribute as a standard, which would collide with your app's attribute. Also, sticking to standards like this will help tools (e.g. editors) make sense of it and make them more useful to you. – mahemoff Jul 12 '14 at 19:49
3

@Blender "there's no guarantee that your HTML will be parsed correctly", the same can be said for valid HTML. – twiz Sep 22 '14 at 01:38
@twiz Yes, but wouldn't you rather reduce the chance of problems by adhering to the agreed standard, like just about everyone else? – Chuck Le Butt Sep 23 '14 at 12:21
@Chuck I was just pointing out that browsers don't necessarily follow the spec. Your point is valid, but in this case I think it is insignificant if you leave off the `data-`. I doubt that the HTML specs are going to start including attributes that are prefixed with `ng-`. – twiz Sep 26 '14 at 16:55
@twiz Why take the chance? The only valid reason I can think of leaving it off is laziness...? It also means it's harder to debug your HTML because any validators will be throwing up lots of errors. I don't see the point myself. – Chuck Le Butt Sep 26 '14 at 19:31
1

@Chuck I'm not suggesting you do it one way or the other, just that the issue is not particularly important. We may as well debate spaces vs tabs while we're at it. haha – twiz Sep 26 '14 at 19:36
@twiz I'd certainly turn my nose up at someone's code if they didn't include the 'data-' -- they just made my life harder for no good reason. – Chuck Le Butt Sep 28 '14 at 17:09
@Chuck Are you suggesting spaces are better than tabs?!? Madness!! – twiz Sep 28 '14 at 17:23
While it used to be true that non-standard attributes are left up to the browser's interpretation, HTML 5 specifies the behavior of non-standard attributes (and other sloppy, sloppy markup). – rich remer Nov 11 '15 at 23:29
down-voted because Angular does not have multiple names - it has only ngApp and the HTML attribute name is converted by the Angular scanning algorithm by stripping off the 'data-' or the 'x-'. It also strips out the '-' from between 'ng' and 'app', and lastly converts lower case to upper camel-case style. – Adam Jul 29 '16 at 12:41

score 41 · Answer 2 · answered Apr 24 '13 at 06:03

41

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/

answered Apr 24 '13 at 06:03

pkozlowski.opensource

117,202
60
326
286

2

Where in the specification of HTML allows for this? – user1876508 Oct 27 '13 at 04:33
3

@user1876508: http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#embedding-custom-non-visible-data-with-the-data-attributes – pkozlowski.opensource Oct 27 '13 at 10:01

score 6 · Answer 3 · answered May 20 '13 at 17:13

6

You can declare the angular namespace <html xmlns:ng="http://angularjs.org" ng-app>

answered May 20 '13 at 17:13

Mounir

11,306
2
27
34

2

This appears to be only applicable for legacy apps: "If you choose to use the old style directive syntax ng: then include xml-namespace in html to make IE happy. (This is here for historical reasons, and we no longer recommend use of ng:.)". Source: https://docs.angularjs.org/guide/bootstrap – Chuck Le Butt Sep 23 '14 at 12:29

score 5 · Answer 4 · answered Apr 24 '13 at 10:35

5

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.

answered Apr 24 '13 at 10:35

abject_error

2,858
1
19
23

This appears to be only true if you're using "ng:". I believe "data-ng-" should validate. – Chuck Le Butt Sep 23 '14 at 12:30

score 4 · Answer 5 · edited Sep 21 '16 at 11:38

4

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>

edited Sep 21 '16 at 11:38

Lucas Freitas

194
12

answered Mar 17 '16 at 16:12

Vahap Gencdal

1,900
18
17

Could you please explain why would the first scenario throw an error? – Awani Aug 27 '18 at 06:08
This is referencing w3c validation. – Graham P Heath Jun 20 '19 at 16:06

score 3 · Answer 6 · answered Apr 04 '17 at 11:54

3

The basic difference between these two terms is that data-ng-app validates the HTML while the latter don't.Functionality remains the same. For more reference you can try w3Validator.

answered Apr 04 '17 at 11:54

Abhishek Gakhar

31
2

score -2 · Answer 7 · answered Jul 07 '16 at 07:51

Absolutely there is 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 using data- prefix with our angular directives is good.

Even you can make use angular directives in below mentioned ways ng-bind, ng:bind, ng_bind, data-ng-bind, x-ng-bind

What is the difference between ng-app and data-ng-app?

7 Answers7

Linked

Related