클래스에 대해 스타일링되지 않은 콘텐츠의 플래시를 방지하는 AngularJS 전략
나는 Angular를 가지고 있다.JS 프로젝트, 클래스 이름 페이지 로드 중에 FOUC를 방지하고 싶습니다.ng-template에 대해 읽은 적이 있지만 태그 내의 콘텐츠에만 도움이 될 것 같습니다.
<body class="{{ bodyClass }}">
페이지 로드에 "로그인"해 주셨으면 합니다.이에 대한 전략이 있나요?아니면 조작하여 '로그인'으로 로드하고 javascript를 사용하여 이 인스턴스에 대해서만 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>각도 앞의 요소JS가 DOM을 로드하고 조작을 시작했습니다.다른 사람들이 뭐라고 했더라?ng-class정답입니다. 적절한 클래스 적용이 가능하지만 Angular가 준비되기 전에는 아무것도 표시하지 마십시오.
이전 버전의 Angular에서는 다음을 수행할 수 있었습니다.
<body style="display:none" ng-show="true" ng-class="{{bodyClass}}">
그러나 최근 버전에서는 이 기능이 작동하지 않습니다.ng-showVisibility를 실현하기 위해서는ng-hideclass(요소 속성보다 구체적이지 않음)
제가 최근에 하고 있는 일은 다음과 같습니다.
<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-cloakclass. 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>
클래스를 사용하는 대신 ng-class를 사용해야 합니다.
<body ng-class="{{ bodyClass }}">
가끔 ng-clock조차 제대로 작동하지 않는 것 같기도 해요.내가 뭔가 잘못하고 있는 것 같아.
<body ng-cloak class="{{ bodyClass }}">
또한 @mbokil과 유사한 작은 작업을 하나 더 수행했습니다.기본적으로 요소를 숨길 수 있습니다.ng-cloak 속성을 가진 요소를 대상으로 하는 속성 선택기를 사용하면 각도 방향을 사용할 수 있습니다.이 방법에는 몇 가지 이점이 있지만, 주요 장점은 일단 각진 화재가 발생하면 이 특성이 삭제되어 재도면을 트리거한다는 것입니다.
<style>
[ng-cloak] {
display:none;
}
</style>
언급URL : https://stackoverflow.com/questions/16074673/angularjs-strategy-to-prevent-flash-of-unstyled-content-for-a-class
'programing' 카테고리의 다른 글
| TypeError: window.initMap은 함수가 아닙니다. (0) | 2023.03.25 |
|---|---|
| Ajax phmyadmin 대체 방법? (0) | 2023.03.25 |
| ORA-30926: 소스 테이블에서 안정적인 행 집합을 가져올 수 없습니다. (0) | 2023.03.25 |
| 내 WordPress 사이트에 스택 오버플로 위젯을 배치하려면 어떻게 해야 합니까? (0) | 2023.03.25 |
| 서버에서 데이터를 가져오는 권장 방법 (0) | 2023.03.25 |