ng-app와 data-ng-app의 차이점은 무엇입니까?

147

AngularJS에 대해 배우기 시작했고 ng-app및 data-ng-app지시문 의 차이점이 무엇인지 혼란 스럽습니다 .

angularjs angularjs-directive

— 사용자 1876508
소스

7

ng-app와 data-ng-app

— chenrui

8

@chenrui-이 Q는 처음으로 btw였습니다. (4 월 24 일 ~ 5 월 16 일)

— Blundering 철학자

1

응용 프로그램이 영향을받을 거되지 않고 각도는 겨 - 응용 프로그램 또는 데이터-ng를-응용 프로그램을 사용하는 경우에도 예상대로 작동하지만 @ user2289659 데이터 - *를 이용하여 언급 한 바와 같이 앞으로 HTML5에서 사용자 지정 특성 표준을 도입

— Shujaath 칸

125

이러한 답변의 대부분은 단순히 THOSE 용어의 의미를 설명하지 않고 템플릿을 유효한 HTML 또는 HTML Validator Compliant로 만듭니다.

확실하지는 않지만 이러한 용어는 보풀과 같은 표준 준수를 위해 코드를 스캔하는 HTML 유효성 검사 프로그램에 적용되는 것 같습니다. ng-app유효한 속성으로 인식되지 않습니다 . 기본이 아닌 HTML 속성이 앞에 붙을 것으로 예상합니다.

data-attribute_name_here.

따라서 제작자는 HTML 유효성 검사기 프로그램에서 "좋아요"있도록 AngularJS지시문에 대한 대체 이름을 data-앞에 포함 시켰 습니다.

— 커비 L. 월리스
소스

4

"좋아. 어쨌든 '검증 자 준수'는 무엇을 의미 하는가?" 접근하다. 당신이 연구를 수행했다면 당신은 당신이 대부분 옳다고 추측하고 있음을 알게 될 것입니다. =)

— slacktracer

22

유효한 HTML은 HTML 검사기 용이 아닙니다. 브라우저는 HTML을 구문 분석합니다. HTML 사양에서 벗어나기 시작하면 HTML이 올바르게 구문 분석된다는 보장이 없습니다.

— Blender

1

예, 유효성 검사기는 끝의 수단입니다. 목표는 웹 페이지를 사양에 최대한 가깝게 만드는 것입니다.이 기능은 앱이 실제로 예상대로 작동하는 브라우저의 수 (오래된, 현재 및 미래)를 최대화합니다. "data- *"의 경우 브라우저가 표준과 동일한 속성을 도입하여 앱의 속성과 충돌 할 위험이 있습니다. 또한 이와 같은 표준을 고수하면 도구 (예 : 편집자)가이를 이해하고보다 유용하게 사용할 수 있습니다.

— mahemoff

2

@Blender "HTML이 올바르게 구문 분석된다는 보장은 없습니다", 유효한 HTML에 대해서도 마찬가지입니다.

— twiz

1

@ 척 나는 당신이 어떤 식 으로든 다른 방법을 제안하지는 않습니다. 문제가 특별히 중요하지 않다는 것입니다. 스페이스와 탭 사이에 토론 할 수도 있습니다. haha

— twiz

41

런타임 동작과 관련하여 어느 것도 여기에 설명되지 않은 다른 스타일 지정 지시문입니다. http://docs.angularjs.org/guide/directive

지시어는 ngBind와 같은 낙타의 경우 이름이 있습니다. 지시문은 낙타 케이스 이름을 특수 문자 :,-또는 _를 사용하여 뱀 케이스로 변환하여 호출 할 수 있습니다. 선택적으로 지시문에 x 또는 data를 접두어로 붙여 HTML 유효성 검사기를 준수 할 수 있습니다. 가능한 지시문 이름 중 일부는 ng : bind, ng-bind, ng_bind, x-ng-bind 및 data-ng-bind입니다.

이 글을 통해 알 수 있듯이 data-HTML을 HTML 유효성 검사기 테스트 /

— pkozlowski.opensource
소스

2

HTML 사양에서 이것을 허용하는 곳은 어디입니까?

— user1876508

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이 아니기 때문에 유효성 검사 차이 가 있으며 웹 페이지에서 HTML 유효성 검사에 실패합니다. Angular를 사용하면 지시문 앞에 접두사를 붙이 data-거나 x-유효성을 검사 할 수 있습니다.

— abject_error
소스

"ng :"를 사용하는 경우에만 해당됩니다. "data-ng-"의 유효성을 검사해야한다고 생각합니다.

— Chuck Le Butt

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>

— Vahap Gencdal
소스

첫 번째 시나리오에서 왜 오류가 발생하는지 설명해 주시겠습니까?

— Awani

이것은 w3c 유효성 검사를 참조합니다.

— Graham P Heath

3

이 두 용어의 기본적인 차이점은 data-ng-app가 HTML의 유효성을 검사하지만 후자는 그렇지 않은 것입니다. 자세한 내용은 w3Validator를 사용해보십시오.

— 아비 셰크 카 하르
소스

-2

어떤 HTML5 유효성 검사기는 ng-app와 같은 속성에서 오류를 발생 시키지만 data-ng-app와 같이 데이터가 접두사로 표시되는 경우에는 오류를 발생시키지 않는다는 점을 제외하고는 둘 사이에 차이가 없습니다. 따라서 각도 지시문에 data-prefix를 사용하는 것이 좋습니다.

ng-bind, ng : bind, ng_bind, data-ng-bind, x-ng-bind 방식으로 각도 지시문을 사용할 수도 있습니다.

— 왕 라즈
소스