HEAD 대 BODY의 AngularJS

HEAD 대 BODY의 AngularJS

---

모든 AngularJS 예제에서 Angular 라이브러리는 문서의 HEAD 태그에 배치됩니다. HTML5 Boilerplate 레이아웃을 기반으로 구축 된 기존 프로젝트가 있습니다. 이는 JS 라이브러리가 </BODY>태그 앞에 DOM의 맨 아래에 배치되어야 함을 정의합니다 .

AngularJS를 HEAD에 배치해야합니까?

---

AngularJS는 HEAD에 배치 할 필요가 없으며 실제로는 HTML로드를 차단하므로 일반적으로 안됩니다.

그러나 페이지 하단에 AngularJS를로드 할 때 "컴파일되지 않은 콘텐츠의 플래시"를 피하기 위해 ng-cloak 또는 ng-bind 를 사용해야 합니다. "index.html"페이지에서 ng-cloak / ng-bind 만 사용하면됩니다. ng-include 또는 ng-view 또는 기타 Angular 구문을 사용하여 초기 페이지로드 후 추가 콘텐츠를 가져 오면 해당 콘텐츠가 표시되기 전에 Angular에 의해 컴파일됩니다.

참조 https://stackoverflow.com/a/14076004/215945

---

Google 그룹스에 대한이 답변은 완벽한 통찰력을 제공했습니다 (단축).

실제로 방문 페이지의 콘텐츠에 따라 다릅니다. 대부분이 예보다 AngularJS 바인딩이 거의없는 정적이라면 페이지 하단이 가장 좋습니다. 그러나 완전히 동적 인 콘텐츠의 경우 [머리에] AngularJS를 최대한 빨리로드하고 싶습니다.

따라서 콘텐츠가 Angular를 통해 대부분 생성되는 경우 ng-cloakAngular를 머리에 포함 하여 추가 CSS 및 지시문을 절약 할 수 있습니다.

https://groups.google.com/d/msg/angular/XTJFkQHjW5Y/pbSotoaqlkwJ

---

반드시 그런 것은 아닙니다.

http://plnkr.co/edit/zzt41VUgR332IV01KPsO?p=preview를 살펴보십시오 . 각도 js가 페이지 하단에 배치되고 상단에 배치되는 경우 동일한 출력을 렌더링합니다.

---

페이지 하단에 Angular JS를로드하면 추악한 {{something}} html이 깜박입니다. body 태그에서 ng-cloak 지시문을 사용하면 JS가로드 될 때까지 빈 플래시가 생성되므로 헤드 요소에 AngularJS를로드하는 것보다 이점이 추가되지 않습니다. ng 지시문이있는 모든 요소에 ng-cloak을 추가 할 수 있지만 결국 빈 요소가 깜박입니다. Soooo, Angular 문서가 해당 문서의이 인용문에서 권장하는대로 헤드 요소에 Angular 및 app.js 파일을로드하기 만하면됩니다. "최상의 결과를 얻으려면 angular.js 스크립트를 html 문서의 헤드 섹션에로드해야합니다."

참고 URL : https://stackoverflow.com/questions/15538125/angularjs-in-head-vs-body