PhoneCat Tutorial App 10- Event Handlers

이번 장에서는 , 폰 상세 페이지에 클릭 가능한 폰 이미지 스와퍼를 추가 하도록 하겠습니다.

- 폰 상세 페이지는 현재 폰의 큰 이미지 하나 와 좀 더 작은 썸네일 이미지들을 보여줍니다.
단지 요구한 썸네일 이미지에 클릭을 함에 따라 어느 썸네일이든 큰 이미지로 대신 할수 있었다면, 그건 정말 대단한 일이지도 모르겠습니다.

암튼 Angular를 가지고 이것을 어떻게 하는지에 해서 보도록 합시다.

Controller

app/js/controllers.js :

 

PhoneDetailCtrl 컨트롤러에서는, mainImageUrl 모델 속성과 첫 번째 폰 이미지 URL의 기본 값 설정을 
생성했습니다.
mainImageUrl의 값을 변경 할 setImage 이벤트 핸들러 함수를 생성했습니다.

Template

app/partials/phone-detail.html:

 

큰 이미지의 ngSrc 지시어를 mainImageUrl 속성에 넣습니다. 
썸네일 이미지와 함께 ngClick 핸들러를 등록 합니다.
사용자가 썸네일중 하나를 클릭했을 때, 핸들러는 setImage 이벤트 핸들러 함수를 썸네일 이미지의 URL에 mainImageUrl 속성 값을 변경 하기 위해 사용 할 것 입니다.

Test

새로운 기능을 검증하기 위해, 우리는 E2E 테스트를 추가했습니다.
하나는 메인 이미지가 첫 번째 폰 이미지에 설정이 기본적으로 되어 있는지 검증합니다.
두 번째 테스트는 여러 썸네일을 클릭하고 메인 이미지가 알맞게 바뀌는 것에 대한 검증을 합니다.

test/e2e/scenario.js

 

테스트를 동작시키기 위해서는 npm run protractor 를 지금 재 동작 할 수 있습니다.

PhoneDetailCtrl 컨트롤러에 mainImageUrl 모델 속성의 추가로 인해 여러분의 유닛 테스트 중 하나를 리팩토링 해야 합니다.
아래와 같이, 통과하기 위한 테스트를 얻기 위해서 이미지 속성과 함께 정확한 json를 되돌려 주는 xyzPhoneData 함수를 만듭니다.

test/unit/controllerSpec.js :

 

여러분의 유닛 테스트들은 지금 통과 되어야 합니다.

Experiments

PhoneDetailCtrl에 새로운 컨트롤 메소드를 추가합시다.

$scope.hello = function(name){

Alert(‘hello ‘ + (name || ‘world’) + ‘!’);

}

<button ng-click=”hello(‘Elmo’)”>Hello</button>

Phone-detail.html 템플릿에 추가해주세요.

Summary

장소에 폰 이미지 스와퍼 와 함께 우리는 데이터를 끌어오는 보다 더 나은 방법을 배우는 11장에 대한 준비가 되었습니다.