ProAngularJS Ch.23 애니메이션

#실행결과 http://study.jeju.onl/ch23/products.html
(22장의 예제를 다시 사용하고 있어서 수정하여 작성했음)

본 장에서는 콘텐츠 전환 애니메이션 기능 ngAnimate와 스와이프 제스처 감지 기능 ngTouch에 대해 설명한다.

** 권고
애니메이션은 은은하고 간결하며 짧아야 한다. 사용자의 관심을 유도하는데 있기 때문에 남용하지 말아야 한다.

ngAnimate를 지원하는 내장 디렉티브 및 애니메이션 이벤트

ng-repeat: enter, leave, move
ng-view/ ng-include/ ng-switch/ ng-if: enter, leave
ng-class/ ng-show/ ng-hide: add, remove

ngTouch는 터치 디바이스 지원을 위한 모듈이다.
이를 테스트 하기 위해서 크롬 브라우져의 개발자 도구를 이용한다.
** 크롬의 디바이스 모드 짱 좋다!

F12를 누르면 개발자 도구가 화면 하단에 뜨는데, 메뉴중 디바이스 아이콘을 클릭하면 디바이스 모드가 활성화 되고, 디바이스 타입별로 선택하여 테스트 할 수 있다.

이에 대한 코드는 다음과 같다.

1) /ch23/products.html

<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
  <title>Ch23. 애니메이션 - ProAngularJS</title>
  <link href="/node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
  <link href="/node_modules/bootstrap/dist/css/bootstrap-theme.css" rel="stylesheet" />

  <a href="/node_modules/angular/angular.js">/node_modules/angular/angular.js</a>
  <a href="/node_modules/angular/angular-resource.js">/node_modules/angular/angular-resource.js</a>
  <a href="/node_modules/angular/angular-route.js">/node_modules/angular/angular-route.js</a>
  <a href="/node_modules/angular/angular-animate.js">/node_modules/angular/angular-animate.js</a>
  <a href="/node_modules/angular/angular-touch.js">/node_modules/angular/angular-touch.js</a>

  <base href="/ch23/">

  <a href="http://products.js">http://products.js</a>
  <style type="text/css">
    /* .ngFade라는 클래스 명을 주목할 것. class="<클래스명>"에 이용됨
      ==> 애니메이션 이벤트에는 enter, leave, move 등이 있고 
        지원하는 내장 디렉티브들에서 가능하다 */
    .ngFade.ng-enter { transition: 0.1s linear all; opacity: 0; }
    .ngFade.ng-enter-active { opacity: 1; }
    /* <문제> leave 이벤트까지 적용하니 두 뷰가 한꺼번에 보인다. 
              DOM에서 추가하고 제거하는 과정탓
      ==> enter만을 이용해 새로 들어오는 뷰에만 적용하는 것이 낫다.
            예제의 의도상 일부러 주석 처리 안하고 남겨둔다 */		
    .ngFade.ng-leave { transition: 0.1s linear all; opacity: 0; }
    .ngFade.ng-leave-active { opacity: 1; }
    
  </style>

</head>
<body ng-controller="defaultCtrl">

  <div class="panel panel-default">
    <div class="panel-body">
      <div class="well">
        <h4>Swipe Here!</h4>
      </div>
      <div>Swipe was: {{ swipeType }}</div>
    </div>
  </div>

  <div class="panel panel-default">
    <h3 class="panel-heading">Products</h3>

    <div class="ngFade"></div>
  </div>

</body>
</html>

2) /ch23/products.js

angular.module( "exampleApp", [ "ngResource", "ngRoute", "ngAnimate", "ngTouch"])

// ... 생략 ... //

.controller("defaultCtrl", function( $scope, $location, productsResource) {

        // ... 생략 ... //

  // ngTouch 관련 예제 코드
  $scope.swipeType = "<None>";
  $scope.handleSwipe = function( direction) {
    $scope.swipeType = direction;
  }

        // ... 생략 ... //

});