Custom Filters 와 Event Handlers

https://docs.angularjs.org/tutorial/step_09

https://docs.angularjs.org/tutorial/step_10

이번에는 두개의 튜토리얼입니다. 간단하고 어렵지 않은 내용이므로 빠르게 소스만 집고 넘어가겟습니다.

---

STEP : 09 Custom Filter

ng 에서는 표현식을 사용할 때 기본 제공하는 Filter를 이용하여, 여러가지 표현식으로 변경할 수 있습니다

{{ expression | filter option }} 이러한 형태로 filter option을 설정하여 표현식의 값을 바꿀 수 있습니다.

기본 제공하는 Filter Option은 ( * https://docs.angularjs.org/api/ng/filter 참조 )

currency(화폐), date(날짜), filter(필터), json, limitTo, orderBy, uppercase, lowercase, number 가 있습니다.

기본 적인 사용법은 w3s school이나 튜토리얼 사이트를 참고해주세요. 어렵지 않아요

이러한 Filter 기능 또한 사용자가 추가적으로 제작하여 사용할 수 있습니다.

기본적인 소스에 변화는 크게 없으니 앞의 라우팅 정리에서 확인해 주시고, 추가적인 부분만 작성하겠습니다.

filters.js 라는 파일을 생성하고

/* Filters */
angular.module('phonecatFilters', []).filter('checkmark', function(){
   return function(input){
//   true (\u2713 -> ✓) or false (\u2718 -> ✘)
      return input ? '\u2713' : '\u2718' ;
   } ;
});

필터 옵션의 이름은 checkmark 입니다. 설명을 하면, expression에서 적용할 경우 값이 true 또는 false 일 때, ✓과 ✘ 로 바꿔 보이도록 해주는 것입니다.

이 Filter의 모듈명은 phonecatFilters라고 정의하였으니, app.js에서 phonecatApp 정의 부분에 추가로 phonecatFilters도 추가합니다.

var phonecatApp = angular.module('phonecatApp', [
 'ngRoute',
 'phonecatControllers',
 'phonecatFilters'
]);

그리고서 phone-detail.html 에서 예를 들어 Connectivity 부분에 GPS 또는 infrared는 true, false로 값이 출력되는데 {{ expression | checkmark }} 라고 필터 옵션을 정의하면, 아래의 그림처럼 웹에서 표기가 됩니다.

---

Step - 10 Event Handlers

기존 웹에서는 자바스크립트 또는 제이쿼리를 이용하여, 버튼을 클릭하면 Alert 창이 뜨거나, 메인 이미지를 바꾸거나 하는 등의 기능을 구현할 수 있었습니다.

이번에는 ng 를 이용하여, 메인 이미지를 변경하는 법을 적어보겠습니다. 먼저 위 이미지에서 좌측이 메인이미지, 그리고 우측의 작은 썸네일 이미지 각각을 클릭하게 되면, 좌측의 메인 이미지가 바뀌는 형태 입니다.

기본적으로 자바스크립트 또는 제이쿼리를 이용하여 작성해본 적이 있으시면, 쉽게 알 수 있듯이 작은 썸네일 이미지의 src에 적힌 이미지 URL을 메인이미지 src에 적용하면 메인이미지로 바뀔 것입니다.

먼저, 이미지 URL을 메인이미지의 URL에 적용하는 기능을 가진 메소드를 작성해야 합니다. 이는 컨트롤러에서 작성이 가능합니다.

앞에 라우팅 과정에서 본 phoneDetailCtrl에 메소드를 추가하겠습니다.

phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams','$http', function($scope,$routeParams,$http){
    $http.get('phones/' + $routeParams.phoneId + '.json').success(function(data){
       $scope.phone = data; 
       $scope.mainImageUrl = data.images[0];
    });
    
    $scope.setImage = function(imageUrl) {
        $scope.mainImageUrl = imageUrl;
    }
    
    $scope.hello = function(name){
        alert('Hello ' + (name || 'world') + '!');
    }
    /*$scope.phoneId = $routeParams.phoneId;*/
}]);

$scope 객체에 setImage라는 이름으로 function을 정의합니다. 파라미터로는 imageUrl을 받게 되고, 이 파라미터는 위에서 설정된 $scope.mainImageUrl의 값을 대신하여 사용되어 이미지가 변경될 것으로 예상됩니다.

다음은 phone-detail.html의 적용된 부분의 소스입니다.

<img ng-src="{{mainImageUrl}}" class="phone">

...

<ul class="phone-thumbs">
  <li ng-repeat="img in phone.images">
    <img ng-src="{{img}}" ng-click="setImage(img)">
  </li>
</ul>

썸네일 이미지들 각각에는 ng-click="setImage(img)" 가 추가되었습니다. ng-click은 onclick="" 과 같은 기능을 하게 되는 것으로 ng에서 사용합니다. ng-click을 사용하는 이유는 ng에서 사용하는 데이터를 사용할 수 있기 때문입니다.

예상한 봐와 같이 썸네일 이미지를 클릭하면, 메인 이미지가 변경 되는 기능 또한 쉽게 추가할 수 있었습니다.

자세하게 보고 싶은 부분들은 최상단에 URL을 통해 튜토리얼에 접근하시면, 모든 소스코드를 보실 수 있습니다.