클래스에 대해 스타일이 지정되지 않은 콘텐츠 플래시를 방지하는 AngularJS 전략
AngularJS 프로젝트가 있는데 클래스 이름에 페이지를로드하는 동안 FOUC를 방지하고 싶습니다. ng-template에 대해 읽었지만 태그 내의 콘텐츠에만 유용 해 보입니다.
<body class="{{ bodyClass }}">
페이지로드시 "로그인"하고 싶습니다. 이것에 대한 전략이 있습니까? 아니면 그냥 그것을 퍼지하고 '로그인'으로로드하고 자바 스크립트를 수동으로 사용하여이 경우에만 DOM을 조정해야합니까?
당신이 찾고있는 것은입니다 ng-cloak.
다음과 같이 추가해야합니다.
<body class="{{ bodyClass }}" ng-cloak>
그러면 원치 않는 깜박임이 방지됩니다.
이에 대한 문서 링크.
편집 :
문서에 따르면 아래의 스 니펫을 CSS 파일에 넣는 것이 좋습니다.
"최상의 결과를 얻으려면 angular.js 스크립트를 html 문서의 헤드 섹션에로드해야합니다. 또는 위의 css 규칙이 애플리케이션의 외부 스타일 시트에 포함되어야합니다."
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
직면하고있는 문제 중 하나는 <body>AngularJS가 DOM을로드하고 조작을 시작하기 전에 브라우저가 요소를 표시한다는 것 입니다. 다른 사람들이 말한 ng-class것은 옳습니다. 올바른 클래스 적용을 할 수 있지만 Angular가 준비되기 전에는 아무것도 보여줄 필요가 없습니다.
Angular의 이전 버전에서는 다음과 같이 할 수 있습니다.
<body style="display:none" ng-show="true" ng-class="{{bodyClass}}">
최근 버전에서는 클래스 ng-show를 추가 및 제거하여 가시성을 수행하기 때문에 작동하지 않습니다 ng-hide(요소 속성보다 덜 구체적 임).
내가 최근에했던 일은 다음과 같습니다.
<head>
...
<style> <!-- Or you could include this in an existing style sheet -->
.ng-cloak {
display: none !important;
}
</style>
</head>
<body class="ng-cloak" ng-cloak ng-class="{{bodyClass}}">
이렇게하면 클래스 <body>의 스타일에 의해가 즉시 숨겨집니다 ng-cloak. Angular가 시작되면 ng-class및 포함 된 모든 지시문을 처리 ng-cloak하므로 <body>요소가 올바른 클래스를 가지며 표시됩니다.
여기 ng-cloak 지시문 자세히 알아보기
방탄 인 일반 CSS의 플래시 문제에 대한 해결책이 있습니다. 앱 루트 요소의 클래스에 다음을 추가하십시오. 이 솔루션은 처리 순서에 따라 작동합니다. 모든 것이 CSS에 숨겨져 있고 각도가로드 된 다음 CSS가 앱 루트를 표시합니다. 나는 이것을 사용하여 페이지에 각도가 아닌 다른 요소가 있으면 먼저 렌더링하여 페이지가 더 빨리로드되는 것처럼 보입니다.
/* in your CSS file in head */
.myApp {
display:none;
}
<div class="myApp" ng-app="myApp"></div>
본문이 끝나기 직전에 스크립트 참조와 인라인 CSS를 추가하십시오.
<script language="javascript" type="text/javascript" src="angular.min.js"></script>
<style>
.myApp {
display:block;
}
</style>
</body>
Instead of using class, you should use ng-class
<body ng-class="{{ bodyClass }}">
I've noticed sometimes even ng-cloak doesn't seem to actually work. Maybe I am doing something wrong.
<body ng-cloak class="{{ bodyClass }}">
I also do one more small thing similar to @mbokil you can hide the element by default. By using an attribute selector targeting any elements with the attribute ng-cloak you're able to utilize angular directives. This has several benefits, but the main benefit is once angular fires it removes this attribute which will trigger a redraw.
<style>
[ng-cloak] {
display:none;
}
</style>
ReferenceURL : https://stackoverflow.com/questions/16074673/angularjs-strategy-to-prevent-flash-of-unstyled-content-for-a-class
'code' 카테고리의 다른 글
| Django 모델-고유 한 값 목록 가져 오기 (0) | 2021.01.11 |
|---|---|
| vlookup 결과에서 # N / A 제거 (0) | 2021.01.11 |
| gpg : 유효한 OpenPGP 데이터가 없습니다. (0) | 2021.01.11 |
| 지정된 문자열로 두 줄 사이의 Bash, grep (0) | 2021.01.11 |
| How to insert a line break in markdown (0) | 2021.01.11 |