Tutorial - 8 - More Templating

이번 스텝에서 사용자가 폰 목록에서 한 폰을 클릭했을 때, 표시될 폰 상세 view를 구현 할 것입니다.

Live Demo

Code Diff

목록에 한 폰을 클릭했을 때, 폰의 상세 정보를 포함한 폰 상세 페이지가 표시될 것 입니다.

폰 상세 view를 구현하기 위해서, 데이터를 가져오기 위해서 $http를 사용하고, phone-detail.html view template에 자세히 표시할 것 입니다.

아래에서 가장 큰 변화들을 확인 할 수 있습니다.

Data

phones.json 파일 외에 각 폰에 대한 json 파일을 app/phones에 추가했습니다.

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

파일들 각각은 같은 데이터 구조를 하용해서 폰의 다양한 속성들을 묘사합니다. 이 데이터를 폰 상세 view에서 표시할 것 입니다.

Controller

json 파일들을 가져오기 위해서 $http service를 사용하도록 PhoneDetailCtrl를 확장 했습니다. 이것은 폰 목폴 controller와 같은 방법으로 동작합니다.

app/js/controllers.js

HTTP request를 위한 URL를 생성하기 위해서 $route service에 의해서 현재 rotue로 부터 추출된 $routeParams.phoneId를 사용했습니다.

Template

TBD placeholder 줄은 폰 상세 정보를 표시하기 위해서 목록들과 binding들로 교체되었습니다. view에서 model로 부터 폰 데이터를 표시하기 위해서 Angualr의 {{ expression }} 마크업과 ngRepeat를 사용한 것을 확인 할 수 있습니다.

app/partials/phone-detail.html

Test

스텝 5에서 PhoneListCtrl controller를 위해서 작성한 것과 비슷한 새로운 단위 테스트를 작성했습니다.

test/unit/controllersSpec.js

Karama 탭에서 아래와 같은 결과를 확인 할 수 있습니다.

또한 Nexux S 상세 페이지로 navigate하고 페이지의 머릿말이 "Nexus S"인지 검증하는 ene-to-end 테스트를 추가했습니다.

test/e2e/scenarios.js

아래 항목 중 하나를 선택해서 테스트를 확인해 볼 수 있습니다.

• ./scripts/e2e-test.sh 를 재실행 합니다.
• end-to-end test runner의 브라우저 탭을 refresh 합니다.
• Angular 서버를 실행해서 확인 해 볼 수 있습니다.

Experiments

http://docs.angularjs.org/tutorial/step_08#experiments