CODEWITHSUNDEEP
angularjsangularjs-directive
user1876508
user1876508

Reputation: 13172

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

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

Upvotes: 147

Views: 71711

Answers (7)

Abhishek Gakhar
Abhishek Gakhar

Reputation: 31

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.

Upvotes: 3

Vahap Gencdal
Vahap Gencdal

Reputation: 2055

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>

Upvotes: 4

King Raj
King Raj

Reputation: 15

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

Upvotes: -2

Kirby L. Wallace
Kirby L. Wallace

Reputation: 1249

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.

Upvotes: 124

Mounir
Mounir

Reputation: 11726

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

Upvotes: 6

abject_error
abject_error

Reputation: 2938

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.

Upvotes: 5

pkozlowski.opensource
pkozlowski.opensource

Reputation: 117370

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/

Upvotes: 41

Related Questions