AngularJS 페이지 반 짝 임 방지 방법

응용 페이지 나 구성 요소 가 데 이 터 를 불 러 올 때 브 라 우 저 와 angular 렌 더 링 페이지 는 일정한 시간 이 필요 하 다 는 것 을 알 고 있 습 니 다.이곳 의 간격 은 매우 작 을 수도 있 고 심지어 사람 으로 하여 금 차 이 를 느끼 지 못 하 게 할 수도 있다.그러나 길 수도 있 습 니 다.그러면 사용자 가 렌 더 링 되 지 않 은 페이지 를 볼 수 있 습 니 다.
이런 상황 을 Flash Of Unrendered Content(FOUC)(K)라 고 하나 요?and is always unwanted.다음은 이러한 상황 이 우리 사용자 에 게 발생 하지 않도록 몇 가지 다른 방식 을 소개 할 것 입 니 다.
1、ng-cloak
ng-cloak 명령 은 angular 의 내장 명령 입 니 다.모든 요 소 를 숨 기 는 역할 을 합 니 다.

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

브 라 우 저 로 딩 과 컴 파일 렌 더 링 이 완료 되면 angular 는 ngCloak 요소 속성 을 자동 으로 삭제 합 니 다.그러면 이 요 소 는 보 이 는 것 이 됩 니 다.
IE7 에서 ng-cloak 을 사용 하 는 안전 방식 은 요소 에 ng-cloak class 를 하나 더 추가 하 는 것 입 니 다.

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

2、ng-bind
ng-bind 는 angular 에 있 는 다른 내 장 된 바 인 딩 페이지 데 이 터 를 조작 하 는 명령 입 니 다.{{}대신 ng-bind 를 사용 할 수 있 습 니 다.
{대신 ng-bind 사용 하기  }}렌 더 링 되 지 않 은{{}을 방지 할 수 있 습 니 다.{{}대신 ng-bind 렌 더 링 된 빈 요 소 를 사용 하면 훨씬 우호 적 입 니 다.
위의 예 는 아래 와 같이 다시 쓸 수 있 습 니 다.그러면 페이지 에{{}이 나타 나 는 것 을 방지 할 수 있 습 니 다.

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

3、resolve
서로 다른 페이지 사이 에 routes(경로)를 사용 할 때,우 리 는 페이지 가 route 에 완전히 불 러 오기 전에 렌 더 링 되 는 것 을 방지 하 는 다른 방법 이 있 습 니 다.
route(경로)에서 resolve 를 사용 하면 route(경로)가 완전히 불 러 오기 전에 불 러 올 데 이 터 를 가 져 올 수 있 습 니 다.데이터 가 불 러 오 는 데 성공 하면 경로 가 바 뀌 고 페이지 도 사용자 에 게 표 시 됩 니 다.데이터 가 불 러 오지 않 으 면 route 가 바 뀌 지 않 습 니 다.the$route ChangeError event will get fired.[$route ChangeError 이벤트 가 활성화 되 나 요?]

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 항목 은 key/value 대상 이 필요 합 니 다.key 는 resolve 가 의존 하 는 이름 입 니 다.value 는 문자열(as a service)이나 의존 하 는 방법 을 되 돌려 줄 수 있 습 니 다.
resolve is very useful when the resolve value returns a promise that becomes resolved or rejected.
경로 가 불 러 올 때 resolve 매개 변수 에 있 는 keys 는 주입 가능 한 의존 으로 사용 할 수 있 습 니 다.

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

resolve key 를 사용 하여$http 방법 으로 돌아 온 결 과 를 전달 할 수 있 습 니 다.as$http returns promises from it's method calls:

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')
   }
  }
 })
});

독립 된 service 방식 을 정의 하여 resolve key 를 사용 하고 service 를 사용 하여 필요 한 데 이 터 를 되 돌려 주 는 것 을 추천 합 니 다(이런 방식 은 테스트 하기 쉽 습 니 다).이렇게 처리 하려 면 service 를 만들어 야 합 니 다.
우선 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;
  }
 }
})

service 를 정의 한 후에 우 리 는 이 service 를 사용 하여 위 코드 에서$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()
   }
  }
 })
});

위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 AngularJS 의 페이지 깜빡 임 방지 방법 입 니 다.여러분 께 도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!