ng-appとdata-ng-appの違いは何ですか？

147

私はAngularJSについて学び始め、ng-appとdata-ng-appディレクティブの違いは何なのか混乱しています。

angularjs angularjs-directive

— user1876508
ソース

7

ng-appとdata-ng-appの

— chenrui 2015

8

@chenrui-このQが最初に来ました。（4月24日vs 5月16日）

— 失策の哲学者2015

1

アプリケーションは影響を受けず、ng-appやdata-ng-appを使用してもAngularは期待どおりに動作しますが、@ user2289659で述べたようにdata- *を使用すると、HTML5以降のカスタム属性標準が導入されます

— Shujaath Khan

125

これらの回答のほとんどは、単にTHOSEの用語の意味も説明せずに、テンプレートを有効なHTMLまたはHTML Validatorに準拠させるとだけ言っています。

確かではありませんが、これらの用語は、コードの標準準拠をスキャンするHTML検証プログラム（lintのようなもの）に適用されると思います。それらはng-app有効な属性として認識されません。彼らは、デフォルトではないHTML属性の前に

data-attribute_name_here。

したがって、の作成者は、HTML検証プログラムがそれらを「好き」になるようAngularJSに、ディレクティブのdata-前にを含む代替名を作成しています。

— カービィ・L・ウォレス
ソース

4

「OK。だから、とにかく「バリデーター準拠」とはどういう意味ですか？」の+1 アプローチ。もしあなたが調査をしたなら、あなたはほとんど正しいと推測していることがわかるでしょう。=）

— slacktracer 2013年

22

有効なHTMLはHTMLバリデーター用ではありません。ブラウザはHTMLを解析します。HTML仕様から逸脱し始めた場合、HTMLが正しく解析される保証はありません。

— Blender 2014年

1

はい、バリデーターは最後まで手段です。目標は、Webページを仕様にできる限り近づけることで、アプリが実際に期待どおりに動作するブラウザーの数（古い、現在、未来）を最大化することです。「data- *」の場合、ブラウザが標準と同じ属性を導入し、アプリの属性と衝突するリスクもあります。また、このような標準に固執することは、ツール（例：エディター）がそれを理解し、それらをより使いやすくするのに役立ちます。

— mahemoff 14

2

@Blenderは、「HTMLが正しく解析される保証はありません」、有効なHTMLについても同じことが言えます。

— twiz 2014

1

@チャック私はあなたがどちらにしてもそれをすることを提案していません、問題が特に重要ではないというだけです。スペースとタブについて議論することもできます。（笑）

— twiz

41

ランタイムの動作という点ではありません。これらは、ここで説明されているように、命名ディレクティブの異なるスタイルにすぎません。http：//docs.angularjs.org/guide/directive

ディレクティブには、ngBindなどのキャメルケース名があります。ディレクティブは、キャメルケース名をこれらの特殊文字：、-、または_を使用してスネークケースに変換することで呼び出すことができます。オプションで、ディレクティブの前にxまたはデータを付加して、HTMLバリデーターに準拠させることができます。以下は、可能なディレクティブ名の一部のリストです：ng：bind、ng-bind、ng_bind、x-ng-bind、data-ng-bind。

これを読むとわかるように、これをdata-使用してHTMLをHTMLバリデーターテストに合格させることができます/

— pkozlowski.opensource
ソース

2

HTMLの仕様のどこでこれが可能になりますか？

— user1876508 2013年

3

@ user1876508：w3.org/TR/2011/WD-html5-20110525/...

— pkozlowski.opensource

6

角度の名前空間を宣言できます <html xmlns:ng="http://angularjs.org" ng-app>

— ムーニア
ソース

2

これは、レガシーアプリにのみ適用できるようです。「古いスタイルディレクティブ構文ng：を使用する場合は、htmlにxml-namespaceを含めてIEを満足させます。これは歴史的な理由によるものであり、 ng :.） "。出典：docs.angularjs.org/guide/bootstrap

— Chuck Le Butt

5

最新のブラウザーでは違いはありませんが、古いIEでは、XMLネームスペースを宣言して宣言しない限り機能しません。

ng-app有効なXHTMLではないという検証の違いもあり、WebページがHTML検証に失敗する原因になります。Angularでは、ディレクティブにプレフィックスを付けdata-たりx-、検証を許可したりできます。

— abject_error
ソース

これは、「ng：」を使用している場合にのみ当てはまるようです。「data-ng-」は検証する必要があると思います。

— チャックルバット

4

ページのHTMLを有効にする場合は、ng-の代わりにdata-ng-を使用できます。
これはエラーをスローします

<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>

これはエラーをスローしません

<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>

— ヴァハプジェンクダル
ソース

最初のシナリオでエラーがスローされる理由を説明してください。

— Awani

これはw3c検証を参照しています。

— Graham P Heath

3

これら2つの用語の基本的な違いは、data-ng-appはHTMLを検証しますが、後者は検証しないことです。機能は同じままです。詳細については、w3Validatorをお試しください。

— アビシェク・ガカール
ソース

-2

特定のHTML5バリデーターはng-appのようなプロパティでエラーをスローしますが、data-ng-appのようにdata-が前に付いているものに対してはエラーをスローしないことを除いて、絶対に2つの間に違いはありません。したがって、角度ディレクティブでdata-接頭辞を使用することは適切です。

以下の方法で角度ディレクティブを使用することもできますng-bind、ng：bind、ng_bind、data-ng-bind、x-ng-bind

— ラージ王
ソース