AngularJS_AngularJS를 사용하여 확장 가능한 페이지 전환을 구현하는 방법

AngularJS 1.2를 사용하면 순수 CSS 클래스 기반 전환 및 애니메이션을 도입하여 단일 페이지 애플리케이션에서 페이지 간 전환을 더 쉽게 만들 수 있습니다. ng-view를 사용하여 다양한 전환을 도입하고 각 페이지가 들어오고 나가는 방식을 도입하는 확장 가능한 접근 방식을 살펴보겠습니다.

데모: http://embed.plnkr.co/PqhvmW/preview

먼저 태그:

 <div class="page-container">
  <div ng-view class="page-view" ng-class="pageAnimationClass"> </div>
 </div>

ng-view는 들어가기/나가기 애니메이션을 사용하므로 DOM에서 두 개의 ng-view 요소를 사용하여 새 보기로 전환하고 이전 보기로 전환할 수 있습니다. 따라서 우리는 절대 위치 지정을 사용하여 상대 위치 지정을 사용하는 페이지 컨테이너 요소에 ng-view를 설정함으로써 모든 종류의 위치 지정 전환을 지원합니다.

'가' 방법

단일 페이지 애플리케이션에서 우리는 여전히 URL을 통한 탐색을 활성화하고 브라우저의 뒤로 및 다음 버튼이 예상대로 작동하는지 확인하려고 합니다. 따라서 $routeProvider에서 경로, 템플릿 및 컨트롤러(선택적 구문 분석)를 설정하면 ng-click에서 상대 경로를 사용하여 페이지를 직접 전환할 수 있습니다.

 <a ng-click="/page2">Go to page 2</a>

그것도 작동하지만 ng-view에서 클래스 스위치를 하드코딩해야 합니다. 대신 $rootScope에 다음과 같이 경로와 토글을 지정할 수 있는 'go' 메소드를 만들어 보겠습니다.

 <a ng-click="go('/page2', 'slideLeft')">Go to page 2</a>

$rootScope 'go' 메소드는 다음과 같습니다.

$rootScope.go = function (path, pageAnimationClass) {
 
  if (typeof(pageAnimationClass) === 'undefined') { // Use a default, your choice
    $rootScope.pageAnimationClass = 'crossFade';
  }
     
  else { // Use the specified animation
    $rootScope.pageAnimationClass = pageAnimationClass;
  }
 
  if (path === 'back') { // Allow a 'back' keyword to go to previous page
    $window.history.back();
  }
     
  else { // Go to the specified path
    $location.path(path);
  }
};

이제 두 번째 매개변수로 지정한 토글 클래스가 ng-view에 추가되고 go 메소드는 지정된 첫 번째 매개변수로 페이지 경로를 변경합니다.

수업 전환

다음으로 할 일은 원하는 만큼의 토글 클래스를 만들고 ngAnimate 모듈에서 제공하는 후크를 사용하는 것입니다. 예를 들면 다음과 같습니다.

/* slideLeft */
.slideLeft {
  transition-timing-function: ease;
  transition-duration: 250ms;
}
 
.slideLeft.ng-enter {
  transition-property: none;
  transform: translate3d(100%,0,0);
}
 
.slideLeft.ng-enter.ng-enter-active {
  transition-property: all;
  transform: translate3d(0,0,0);
}
 
.slideLeft.ng-leave {
  transition-property: all;
  transform: translate3d(0,0,0);
}
 
.slideLeft.ng-leave.ng-leave-active {
  transition-property: all;
  transform: translate3d(-100%,0,0);
}