PhoneCat Tutorial App 8 - More Templating

이번 단계에서는 사용자가 폰 리스트 안에 폰을 클릭할 때 보여지는 폰 상세 뷰를 구현하겠습니다.

- 폰 리스트에 폰을 클릭할 때, 폰 상세 정보와 함께 폰 상세 페이지 는 보여질 것 입니다.

Data

phones.json에 더해서, app/phones 디렉토리는 또한 각각의 폰에 대해 한 개의 json 파일을 포함합니다.

app/phones/nexus-s.json : (sample snippet)

각각의 이 파일들은 다양한 폰의 속성들을 같은 데이터 구조를 사용하여 묘사합니다.
폰 상세 뷰에서 이 데이터를 보여줄 겁니다.

Controller

$http 서비스를 사용해서 json 파일을 가지오기 위해 phoneDetailCtrl를 확장 할것입니다.

app/js/controllers.js

HTTP 요청을 위한 URL을 생성하기 위해, $route 서비스에 의해 현재 라우트로부터 추출된 $routeParams.phoneId 를 사용합니다.

Template

TBD 플레이스 홀더 라인은 폰 상세가 구성된 리스트들 과 바인딩들과 함께 놓여 졌습니다.
우리가 Angular {{expression}} 마크업을 사용한 곳과 뷰 안에 우리모델로부터 나온 프로젝트 폰 데이터에서의 ngRepeat 을 적어두세요.

App/partials/phone-detail.html :  

Test

5장의 PhoneListCtrl 컨트롤러를 위해 작성했던 것과 비슷한 유닛테스트 하나를 작성했습니다.

Karma 탭에 아래 결과를 지금 볼 수 있습니다.

또한 Nexus S 상세 페이지로 이동하는 것과 페이지 헤드가 “Nexus S”인 것을 검증하는 E2E 테스트를 

추가했습니다.

Test/e2e/scenario.js :  

테스트가 동작하는 것을 보려면 Npm run protractor 로 재가동 해보세요

Experiments

Protractor API 의 사용해서, 4개의 썸네일 이미지를 Nexus S 상세 페이지에서 보여지는 것을 검증하는 것에 대한 테스트를 작성하세요.

Protractor API : https://github.com/angular/protractor/blob/master/docs/api.md

Summary

자, 폰 상세 뷰가 이곳에 있고, 여러분 자신의 커스텀 디스플레이 필터를 어떻게 작성하는지 9장으로 나아갑시다.