AngularJS: 앱이 로드되기 전에 화면이 깜빡일 때 (ng-cloak)

발생일: 2015.01.01

키워드: angular, AngularJS, ng-clock, ngClock, 템플릿

문제:
앵귤러로 앱을 만들었는데, 페이지에 들어가면 렌더링 되지 않은 템플릿 때문에 깜빡거린다.
뭔가 해결 방법이 있을 것 같은데...


해결책:

앱이 로드되기 전에 템플릿이 포함된 화면이 깜빡거리는 경우, `ng-cloak` 디렉티브를 사용하면 된다.
`<body>`나 `ng-app` 속성을 정의한 태그에 `ng-clock` 속성을 할당하는 방식으로 처리할 수 있다.

    <html ng-clock ng-app=“sampleApp”>

`ng-clock`은 디렉티브가 정의된 엘리먼트를 `display:none` 시켰다가, 앱이 준비되면 보여주는 방식으로 처리하는데,
크롬 익스텐션처럼 CSP(Content Security Policy)가 적용되어 있는 경우엔 아래 CSS 룰을 별도로 정의해줘야 한다.

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

이 스타일은 `angular.js`에 포함되어 있고, CSP가 적용되지 않는 환경에선 올바르게 동작한다.



카테고리

분류 전체보기 (711)
About me. (6)
Daylogs (676)
영어공부 (0)
My works - 추억 (29)
비공개 (0)