ng-app 지시문의 배치 (html vs body)


103

최근에 angular로 빌드 된 webapp의 코드를 검토 한 결과 태그 ng-app="myModule"에 지시문 이있는 것으로 작성되었습니다 <body>. 앵귤러를 배울 때 <html>, 앵귤러 문서가 여기 , 여기 , 그리고 그들의 튜토리얼 에서 권장하는대로 태그에서 사용되는 것을 본 적이 있습니다 .

나는이 내 자신에 조금 탐구 및 SO 질문, 특히 발견했습니다 이것 과 유사하게 이 한 페이지에 여러 모듈을로드 논의. 그러나이 기술 은 본문 내의 요소에 ng-app을 배치 하고 수동 부트 스트랩을 사용하여 두 개의 각도 앱을 동시에 실행 하는 것과 관련이 있으므로 필자의 경우와 다릅니다 .

내가 알 수있는 한, 런타임 ng-app에 on <html>또는 <body>. 내가 알기 ng-app로는 각도 응용 프로그램의 루트를 지정하므로 각도 응용 프로그램에 배치하면 각도 범위에서 <body>잘릴 <head>수 있지만 이것이 영향을 미치는 주요 방법을 생각할 수 없습니다. 그래서 제 질문은 다음과 같습니다. ng-app이 태그 중 하나를 다른 태그 대신에 배치 하는 것의 기술적 차이점은 무엇입니까 ?

답변:


144

어디에 두 었는지 큰 차이가 없습니다 ng-app.

당신이 그것을 <body>입으면 AngularJS에 대한 더 작은 범위가 약간 더 빠릅니다.

하지만 사용한 ng-app<html>을 조작하기위한 <title>.


답변 해주셔서 감사합니다! 이것은 기본적으로 내가 내린 결론이므로 다른 사람들이 같은 생각을하고 있다는 소식을 듣게되어 기쁩니다. 나는 그것이 왜 더 빠르며 얼마나 더 빠를 수 있는지에 대해 정확히 관심이 있습니다. 더 많이 설명 할 수 있습니까? 아니면 이것을 설명 할 수있는 참조가 있습니까?
MattDavis 2013

10
나는 정말로 약간 더 빠르다는 것을 의미 합니다. 최소한입니다. 범위가 작다는 것은 AngularJS가 지시문을 찾는 요소가 적다는 것을 의미합니다. 예를 들어 오픈 그래프에 대한 메타 요소가 많은 경우 약간의 영향을 미칠 수 있습니다.
Haralan Dobrev 2013

12
표제. 그게 진짜 이유입니다.
ahnbizcad

2
제목을 변경하려면 일반 자바 스크립트를 사용합니다.
Sean_A91

3
@ Sean_A91 그러나 AngularJS에서 전체 페이지를 실행하는 경우 Angular를 사용하는 것이 더 합리적입니다. 더 일관성이있어 유지 관리가 용이하고 페이지 본문에서도 제목 모델을 재사용 할 수 있습니다.
Haralan Dobrev

21

저는 레거시 앱을 작업하는 팀에 있었는데 레거시 코드에서 새 코드를 분리하기 위해 래퍼로 사용되는 div에서 ng-app 태그를 사용하는 것이 가장 좋습니다.

우리는 jqGrid 및 Dojo에 크게 의존하는 앱에서 작업하면서이를 발견했습니다.

헤드 태그에 ng-app을 추가하면 사이트가 터졌지만 래퍼를 사용하면 문제없이 Angular를 사용할 수있었습니다.


14
이것은 Angular의 세 가지 사용 사례를 구분하는 좋은 예입니다. "단일 페이지 앱", "독립형"(즉, 페이지를 차지하지만 다른 페이지에 대한 일반 링크 사용), "믹신"(예 : 그 페이지). 당신은 믹스 인 사용법을 정확히 설명했고이 경우 완전히 합의 된 ng-app은 믹스 인이 적용되는 div에만 있어야합니다. 그러나 독립 실행 형 또는 SPA 사용의 경우 <html>에 있어야한다고 생각합니다.
fool4jesus

@ fool4jesus Angular의 다양한 사용 옵션에 대한 기사를 알고 있습니까? 물론 권장되는 SPA 버전에 대한 많은 정보가 있지만 최근에 저는 Angular를 jQuery가 많은 코드베이스에 추가해야했고 성공과 함께 사용하고 미쳐 버리지 않는 가장 좋은 옵션이 무엇인지 궁금했습니다.
Senthe

@Senthe는 까다로울 수 있습니다. 의심 할 여지없이 angular는 자체 DOMain을 담당하는 것을 좋아합니다. 페이지의 겹치는 영역보다는 해당 영역을 제어하는 ​​것이 더 중요하다고 생각합니다. 즉, 각도 영역에서 여전히 jquery를 사용할 수 있지만 각도 코드로 시작할 수 있습니다. 페이지가 이미 존재하는 경우 쉽지 않습니다! 즉, <script> 태그 사이의 항목이 각 구조 (컨트롤러 및 지시문)로 이동해야하는만큼 이동해야하는 것은 jquery 호출이 아닙니다. 그게 말이 되나요?
fool4jesus

4

AngularJS가 찾은 첫 번째 ng-app을 부트 스트랩합니다! 그게 다야. 하나 이상의 ng-app이있는 경우 첫 번째 앱만 처리합니다. 다른 요소를 부트 스트랩하려면 angular.bootstrap ()

ng-app 속성의 값은 다음을 사용하여 생성 된 모듈입니다.

angular.module("module_name", [])

모듈은 다른 프로그래밍 언어와 달리 main () 메서드가 없기 때문에 angular가 부트 스트랩되는 방법을 정의합니다. ng-app의 값이 비어 있으면 기본 모듈 인 'ng'를 사용하도록 기본 설정됩니다.

angular는 ng-app이 있던 요소 내부의 모든 요소를 ​​처리하기 때문에 약간 더 빠르다고합니다. 그러나 매우 부피가 큰 DOM을 사용하지 않는 한 차이가 전혀 눈에 띄지 않을 것이기 때문에 나는 약간 의심합니다.

여기에 예제가 필요하면 http://noypi-linux.blogspot.com/2014/07/angularjs-tutorials-understanding.html

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.