AngularJS page_AngularJS에 액세스할 때 페이지 깜박임 문제에 대한 솔루션

우리는 애플리케이션 페이지나 구성 요소가 데이터를 로드해야 할 때 브라우저와 Angular 모두 페이지를 렌더링하는 데 일정 시간이 걸린다는 것을 알고 있습니다. 여기의 간격은 너무 작아서 차이가 눈에 띄지 않을 수도 있고 길어서 사용자가 렌더링되지 않은 페이지를 보게 될 수도 있습니다.

이런 상황을 FOUC(Flash Of Unrendered Content)(K)라고 하나요? 아래에서는 이러한 일이 사용자에게 발생하지 않도록 방지하는 몇 가지 방법을 살펴보겠습니다.

1. 망토
ng-cloak 지시문은 Angular에 내장된 지시문으로, 그 기능은 포함된 모든 요소를 ​​숨기는 것입니다.

<div ng-cloak>
 <h1>Hello {{ name }}</h1>
</div>

Ng-cloak의 구현 원리는 지시어입니다. 페이지 초기화는 다음과 같이 DOM 헤더에 CSS 코드 한 줄을 추가하는 것입니다.

<pre class= “prettyprint linenums”>

  [ng\:cloak],[ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak{

  Display:none ! important;

}

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

Angular는 ng-cloak으로 요소를 표시: 없음으로 설정합니다.

Angular가 ng-cloak으로 노드를 구문 분석할 때 해당 요소의 ng-cloak 속성과 calss를 동시에 제거하여 노드가 깜박이는 것을 방지합니다. 다음과 같습니다:

<script type =”text/ng-template” id =”scenario.js-150”>

  It(‘should remove the template directive and css class',function(){

 Expect(element(‘.doc-example-live #template1').attr(‘ng-cloak'))

  not().toBeDefined();

   Expect(element(‘.doc-example-live #template2').attr(‘ng-cloak')).

Not().toBeDefined();

});

</script>

<script type =”text/ng-template” id =”scenario.js-150”>
 
  It(‘should remove the template directive and css class',function(){
 
 Expect(element(‘.doc-example-live #template1').attr(‘ng-cloak'))
 
  not().toBeDefined();
 
   Expect(element(‘.doc-example-live #template2').attr(‘ng-cloak')).
 
Not().toBeDefined();
 
});
 
</script>

2.ng-바인딩
ng-bind는 바인딩된 페이지 데이터를 작동하는 데 사용되는 Angular의 또 다른 내장 명령입니다. {{ }} 대신 ng-bind를 사용하여 요소를 페이지에 바인딩할 수 있습니다.

{{ }} 대신 ng-bind를 사용하면 렌더링되지 않은 {{ }}가 사용자에게 표시되는 것을 방지할 수 있습니다. ng-bind로 렌더링된 빈 요소를 사용하여 {{ }}를 대체하는 것이 훨씬 더 친숙할 것입니다.

위의 예는 다음과 같이 다시 작성하여 {{ }}가 페이지에 표시되지 않도록 할 수 있습니다

<div>
 <h1>Hello <span ng-bind="name"></span></h1>
</div>

3. 결심
다른 페이지 간에 경로를 사용할 때 데이터가 경로에 완전히 로드되기 전에 페이지가 렌더링되지 않도록 하는 또 다른 방법이 있습니다.

경로에서 해결을 사용하면 경로가 완전히 로드되기 전에 로드해야 하는 데이터를 얻을 수 있습니다. 데이터가 성공적으로 로드되면 경로가 변경되고 페이지가 사용자에게 표시됩니다. 데이터가 성공적으로 로드되지 않으면 경로가 변경되지 않고 $routeChangeError 이벤트가 시작됩니다. (아님) 활성화되나요? ]

angular.module('myApp', ['ngRoute'])
.config(function($routeProvider) {
 $routeProvider
 .when('/account', {
 controller: 'AccountCtrl',
 templateUrl: 'views/account.html',
 resolve: {
  // We specify a promise to be resolved
  account: function($q) {
  var d = $q.defer();
  $timeout(function() {
   d.resolve({
   id: 1,
   name: 'Ari Lerner'
   })
  }, 1000);
  return d.promise;
  }
 }
 })
});

해결 항목에는 키/값 개체가 필요합니다. 키는 종속성 해결의 이름입니다. 값은 문자열(서비스)이거나 종속성을 반환하는 메서드일 수 있습니다.

resolve는 해결 값이 해결되거나 거부된 Promise를 반환할 때 매우 유용합니다.

경로가 로드되면 해결 매개변수의 키를 주입 가능한 종속성으로 사용할 수 있습니다.

angular.module('myApp')
.controller('AccountCtrl', 
 function($scope, account) {
 $scope.account = account;
});

$http가 메서드 호출에서 promise를 반환하므로 확인 키를 사용하여 $http 메서드에서 반환된 결과를 전달할 수도 있습니다.

angular.module('myApp', ['ngRoute'])
.config(function($routeProvider) {
 $routeProvider
 .when('/account', {
 controller: 'AccountCtrl',
 templateUrl: 'views/account.html',
 resolve: {
  account: function($http) {
  return $http.get('http://example.com/account.json')
  }
 }
 })
});

리졸브 키를 사용하려면 독립적인 서비스를 정의하고, 그에 따라 필요한 데이터를 반환하는 서비스를 사용하는 것이 좋습니다(이 방법이 테스트하기 더 쉽습니다). 이런 방식으로 처리하려면 서비스를 만들어야 합니다.

먼저 accountService를 살펴보세요.

angular.module('app')
.factory('accountService', function($http, $q) {
 return {
 getAccount: function() {
  var d = $q.defer();
  $http.get('/account')
  .then(function(response) {
  d.resolve(response.data)
  }, function err(reason) {
  d.reject(reason);
  });
  return d.promise;
 }
 }
})

서비스를 정의한 후 이 서비스를 사용하여 위 코드에서 $http에 대한 직접 호출을 대체할 수 있습니다.

angular.module('myApp', ['ngRoute'])
.config(function($routeProvider) {
 $routeProvider
 .when('/account', {
 controller: 'AccountCtrl',
 templateUrl: 'views/account.html',
 resolve: {
  // We specify a promise to be resolved
  account: function(accountService) {
  return accountService.getAccount()
  }
 }
 })
});