ng-app vs. data-ng-app, wat is het verschil?

Ik bekijk momenteel deze introductievideovoor angular.js

Op een gegeven moment (na 12’40”) stelt de spreker dat de attributen ng-appen data-ng-app=""min of meer equivalent binnen de <html>-tag, en dat geldt ook voor ng-model="my_data_bindingen data-ng-model="my_data_binding". De spreker zegt echter dat de html gevalideerd wordt door verschillende validators, afhankelijk van welk attribuut wordt gebruikt.

Kun je het verschil uitleggen tussen de twee manieren, ng-prefix tegen data-ng-prefix ?


Antwoord 1, autoriteit 100%

Goede vraag. Het verschil is eenvoudig – er is absoluut geen verschil tussen de twee behalvedat bepaalde HTML5-validators een fout zullen genereren op een eigenschap zoals ng-app, maar ze geven geen een fout voor alles met het voorvoegsel data-, zoals data-ng-app.

Dus om je vraag te beantwoorden, gebruik data-ng-appals je je HTML wat makkelijker wilt valideren.

Leuk weetje: je kunt ook x-ng-appgebruiken voor hetzelfde effect.


Antwoord 2, autoriteit 16%

Van Angularjs-documentatie

Angular normaliseert de tag en attribuutnaam van een element om te bepalen
welke elementen bij welke richtlijnen passen. We verwijzen meestal naar:
instructies door hun hoofdlettergevoelige camelCase genormaliseerde naam (bijv.
ngModel). Omdat HTML echter niet hoofdlettergevoelig is, verwijzen we naar:
richtlijnen in de DOM door kleine letters, meestal met behulp van
door streepjes gescheiden attributen op DOM-elementen (bijv. ng-model).

Het normalisatieproces is als volgt:

Strip x- en data- van de voorkant van het element/de attributen. Converteer de :, – of _-gescheiden naam naar camelCase. Hier zijn enkele equivalenten
voorbeelden van elementen die overeenkomen met ngBind:

gebaseerd op bovenstaande verklaring hieronder zijn allemaal geldige richtlijnen

1. ng-bind
2. ng:bind
3. ng_bind
4. data-ng-bind
5. x-ng-bind


Antwoord 3, autoriteit 7%

De verschillen zitten in het feit dat aangepaste data-*attributen geldig zijn in de HTML5-specificatie. Dus als u uw opmaak nodig heeft om te worden gevalideerd, moet u deze gebruiken in plaats van de ng-attributen.


Antwoord 4, autoriteit 4%

Kort antwoord:

ng-modelen data-ng-modelzijn hetzelfde en equivalent!


Waarom?

  1. reden voor:data-voorvoegsel
    HTML5-specificatie verwacht dat elk aangepast kenmerk wordt voorafgegaan door data-.

  2. reden voor:zowel ng-modelals data-ng-modelzijn hetzelfde en equivalent.

AngularJS-document – Normalisatie

Angular normaliseert de tag en de attribuutnaam van een element om te bepalen welke elementen overeenkomen met welke richtlijnen. We verwijzen doorgaans naar richtlijnen met hun hoofdlettergevoelige camelCasegenormaliseerde naam (bijv. ngModel). Omdat HTML echter niet hoofdlettergevoelig is, verwijzen we naar richtlijnen in het DOM in kleine letters, meestal met behulp van door streepjes gescheidenattributen op DOM-elementen (bijv. ng-model).

Het normalisatieproces is als volgt:

1. Strip x-en data-van de voorkant van het element/de attributen.

2. Converteer de :, -, of_-gescheiden naam naar camelCase.

Bijvoorbeeld
De volgende formulieren zijn allemaal equivalent en passen bij de NGBIND-richtlijn:

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

Antwoord 5

U kunt gegevens-ng-, in plaats van ng-, als u uw pagina HTML geldig wilt maken.


Antwoord 6

Als u HTML- of HTML-fragmenten op uw server wilt manipuleren voordat u het naar de browser wilt dienen, wilt u zeker data-NG-XXX-kenmerken gebruiken in plaats van alleen NG-XXX-kenmerken.

  1. Het maakt uw HTML geldig, wat betekent dat het kan worden gebruikt door HTML (Server-gebaseerde) parsers zoals DOMDocument (PHP) of anderen. Deze parsers falen vaak niet goed gevormd HTML.
  2. Angularis normaliseert het attribuut, maar vergeet niet, dat staat op de client, niet op de server.

Other episodes