Jaka jest różnica między ng-app i data-ng-app?

147

Zacząłem uczyć się o AngularJS i nie wiem, jakie są różnice między dyrektywami ng-appi data-ng-app.

angularjs angularjs-directive user1876508
źródło
7
możliwy duplikat ng-app vs. data-ng-app, jaka jest różnica?
chenrui
8
@chenrui - to Q było pierwsze przy okazji. (24 kwietnia vs 16 maja)
Blundering Philosopher
1
Twoja aplikacja nie zostanie dotknięta, a Angular będzie działał zgodnie z oczekiwaniami, nawet jeśli używasz ng-app lub data-ng-app, ale jak wspomniał @ user2289659, wykorzystując dane- *, od HTML5 wprowadzono standard atrybutów niestandardowych
Shujaath Khan

Odpowiedzi:

125

Większość z tych odpowiedzi po prostu mówi, że szablon jest prawidłowym kodem HTML lub zgodnym z walidatorem HTML , bez wyjaśniania również, co te terminy oznaczają.

Nie wiem na pewno, ale zgaduję, że te warunki mają zastosowanie do programów walidacyjnych HTML, które skanują Twój kod pod kątem zgodności ze standardami - trochę jak kłaczki. Nie rozpoznają ng-appjako prawidłowego atrybutu. Oczekują, że atrybuty HTML inne niż domyślne będą poprzedzone

data-attribute_name_here.

Dlatego twórcy AngularJSstworzyli alternatywne nazwy dla swoich dyrektyw, które zawierają data-przed sobą znak przed nimi, aby programy walidatorów HTML „polubiły” je.

Kirby L. Wallace
źródło
4
+1 dla „Ok. Więc co właściwie oznacza wyrażenie„ zgodność z walidatorem ”?” podejście. Gdybyś przeprowadził badania, dowiedziałbyś się, że zgadujesz w większości dobrze. =)
slacktracer
22
Prawidłowy kod HTML nie jest przeznaczony dla walidatorów HTML. Przeglądarki analizują HTML. Jeśli zaczniesz odbiegać od specyfikacji HTML, nie ma gwarancji, że kod HTML zostanie poprawnie przeanalizowany.
Blender
1
Tak, walidatory są środkiem do końca. Celem jest, aby Twoje strony internetowe były jak najbardziej zbliżone do specyfikacji, co maksymalizuje liczbę przeglądarek - starych, obecnych i przyszłych - w których Twoja aplikacja będzie faktycznie działać zgodnie z oczekiwaniami. W przypadku „data- *” istnieje również ryzyko, że przeglądarki ryzyka mogą wprowadzić ten sam atrybut co standard, który kolidowałby z atrybutem Twojej aplikacji. Ponadto trzymanie się takich standardów pomoże narzędziom (np. Redaktorom) nadać temu sens i uczynić je bardziej przydatnymi.
mahemoff
2
@Blender "nie ma gwarancji, że twój HTML zostanie poprawnie przeanalizowany", to samo można powiedzieć o poprawnym HTML.
twiz
1
@Chuck Nie sugeruję, żebyś robił to w taki czy inny sposób, tylko że sprawa nie jest szczególnie ważna. Równie dobrze możemy debatować nad spacjami i tabulatorami, kiedy już to robimy. haha
twiz
41

Brak, jeśli chodzi o zachowanie środowiska uruchomieniowego, to tylko różne style dyrektyw nazewnictwa, jak opisano tutaj: http://docs.angularjs.org/guide/directive

Dyrektywy mają nazwy z wielbłądami, takie jak ngBind. Dyrektywę można wywołać, tłumacząc nazwę przypadku wielbłąda na skrzynkę węża za pomocą tych znaków specjalnych:, - lub _. Opcjonalnie dyrektywa może być poprzedzona przedrostkiem x- lub data-, aby była zgodna z walidatorem HTML. Oto lista niektórych możliwych nazw dyrektyw: ng: bind, ng-bind, ng_bind, x-ng-bind i data-ng-bind.

Jak widać z lektury tego tekstu, data-może on zostać użyty do przejścia przez HTML testów walidatora HTML /

pkozlowski.opensource
źródło
2
Gdzie w specyfikacji HTML na to pozwala?
user1876508
3
@ user1876508: w3.org/TR/2011/WD-html5-20110525/ ...
pkozlowski.opensource
6

Możesz zadeklarować kątową przestrzeń nazw <html xmlns:ng="http://angularjs.org" ng-app>

Mounir
źródło
2
Wydaje się, że ma to zastosowanie tylko do starszych aplikacji: „Jeśli zdecydujesz się użyć składni dyrektywy w starym stylu: dołącz przestrzeń nazw xml do kodu HTML, aby uszczęśliwić IE. (To jest tutaj ze względów historycznych i nie zalecamy już używania ng :.) ”. Źródło: docs.angularjs.org/guide/bootstrap
Chuck Le Butt
5

W nowoczesnych przeglądarkach nie ma różnicy, ale w starszych IE nie będą działać, dopóki nie zadeklarujesz definiującej ją przestrzeni nazw XML.

Istnieje również różnica w walidacji polegająca na tym, że ng-appnie jest to prawidłowy XHTML i spowoduje, że Twoja strona internetowa nie przejdzie walidacji HTML. Angular pozwala na przedrostek swoich dyrektyw za pomocą data-lub x-zezwalanie na walidację.

abject_error
źródło
Wydaje się, że jest to prawdą tylko wtedy, gdy używasz „ng:”. Uważam, że "data-ng-" powinno się sprawdzić.
Chuck Le Butt
4

Możesz użyć data-ng- zamiast ng-, jeśli chcesz, aby kod HTML strony był prawidłowy.
To będzie rzucać błąd

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

To nie spowoduje błędu

<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>
Vahap Gencdal
źródło
Czy mógłbyś wyjaśnić, dlaczego pierwszy scenariusz miałby spowodować błąd?
Awani
To odwołuje się do walidacji w3c.
Graham P Heath
3

Podstawowa różnica między tymi dwoma terminami polega na tym, że data-ng-app sprawdza poprawność kodu HTML, a druga nie. Funkcjonalność pozostaje taka sama. Aby uzyskać więcej informacji, możesz wypróbować w3Validator.

Abhishek Gakhar
źródło
-2

Absolutnie nie ma między nimi różnicy, z wyjątkiem tego, że niektóre walidatory HTML5 będą zgłaszać błąd we właściwości, takiej jak ng-app, ale nie zgłaszają błędu dla niczego, co ma prefiks data-, jak data-ng-app. Zatem używanie przedrostka danych z naszymi dyrektywami kątowymi jest dobre.

Nawet ty możesz używać dyrektyw kątowych na wymienione poniżej sposoby ng-bind, ng: bind, ng_bind, data-ng-bind, x-ng-bind

Król Raj
źródło