Html ng-app vs. data-ng-app，有什么区别？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16589853/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ng-app vs. data-ng-app, what is the difference?
提问by Stephane Rolland
I'm currently looking at this start tutorial videofor angular.js
目前，我在看这个入门教程视频的angular.js
At some moment (after 12'40"), the speaker states that the attributes ng-appand data-ng-app=""are more or less equivalent inside the <html>tag, and so are ng-model="my_data_bindingand data-ng-model="my_data_binding". However The speaker says the html would be validated through different validators, depending on which attribute is used.
在某一时刻（后12'40" ），扬声器指出的属性ng-app和data-ng-app=""是内部或多于或少于<html>标签等都是ng-model="my_data_binding和data-ng-model="my_data_binding"。但是发言者说，HTML代码将通过不同的验证验证，这取决于哪个属性用过的。
Could you explain the difference between the two ways, ng-prefix against data-ng-prefix ?
你能解释一下这两种方式的区别吗，ng-前缀对data-ng-前缀？
回答by Code Whisperer
Good question. The difference is simple - there is absolutely no difference between the two exceptthat 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.
好问题。区别很简单 - 两者之间绝对没有区别，只是某些 HTML5 验证器会在属性上抛出错误，例如ng-app，但它们不会对任何以 为前缀的内容抛出错误data-，例如data-ng-app。
So to answer your question, use data-ng-appif you would like validating your HTML to be a bit easier.
因此，要回答您的问题，请使用data-ng-appif 您希望验证您的 HTML 更容易一些。
Fun fact: You can also use x-ng-appto the same effect.
有趣的事实：您也可以使用它x-ng-app来达到相同的效果。
回答by srinu
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:
Angular 规范化元素的标签和属性名称，以确定哪些元素匹配哪些指令。我们通常通过区分大小写的驼峰命名规范化名称（例如 ngModel）来引用指令。然而，由于 HTML 不区分大小写，我们以小写形式引用 DOM 中的指令，通常在 DOM 元素上使用破折号分隔的属性（例如 ng-model）。
归一化过程如下：
从元素/属性的前面去除 x- 和 data- 。将 :、- 或 _ 分隔的名称转换为驼峰式命名法。以下是与 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
1. ng-bind
2. ng:bind
3. ng_bind
4. 数据-ng-bind
5. x-ng-bind
回答by Manu Letroll
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 ngattributes.
不同之处在于自定义data-*属性在HTML5 规范中有效。因此，如果您需要验证您的标记，您应该使用它们而不是ng属性。
回答by Eddy
Short Answer:
简答：
ng-modeland data-ng-modelare same and equivalent!
ng-model并且data-ng-model是相同的和等价的！
Why?
为什么？
reason for:
data-prefix
HTML5 specificationexpects any custom attribute to be prefixed bydata-.reason for:both
ng-modelanddata-ng-modelare same and equivalent.
原因：
data-前缀
HTML5 规范要求任何自定义属性都以data-.原因：这两个
ng-model和data-ng-model相同和等同的。
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 camelCasenormalized name (e.g.ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimitedattributes on DOM elements (e.g.ng-model).
The normalization process is as follows:
1. Stripx-anddata-from the front of the element/attributes.
2. Convert the:,-, or_-delimited name tocamelCase.
For example
the following forms are all equivalent and match the ngBind directive:
AngularJS 文档 - 规范化
Angular 规范化元素的标签和属性名称，以确定哪些元素与哪些指令匹配。我们通常通过区分大小写的驼峰命名规范化名称（例如ngModel）来引用指令。然而，由于 HTML 不区分大小写，我们以小写形式引用 DOM 中的指令，通常在 DOM 元素上使用破折号分隔的属性（例如ng-model）。
归一化过程如下：
1.从元素/属性的前面剥离x-和data-。
2.转换的:，-或_-delimited名camelCase。
例如
以下形式都是等效的，并且与 ngBind 指令匹配：
<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>
回答by NNaseet
You can use data-ng-, instead of ng-, if you want to make your page HTML valid.
如果您想让您的页面 HTML 有效，您可以使用 data-ng- 而不是 ng-。
回答by Kees Hessels
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.
如果您想在将其提供给浏览器之前在您的服务器上操作 html 或 html-fragments，您绝对希望使用 data-ng-xxx 属性而不仅仅是 ng-xxx 属性。
- 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.
- 它使您的 html 有效，这意味着它可以被 html（基于服务器）解析器使用，如 domdocument (php) 或其他解析器。这些解析器经常在格式不正确的 html 上失败。
- Angular 规范了属性，但请记住，这是在客户端上，而不是在服务器上。
