Tutorial - 6 - Templating Links & Images
이번 스텝에서 폰 목록에 폰의 썸네일 이미지를 추가할 것입니다. 하위 스텝으로 카탈로그의 폰들에 대한 추가 정보를 표시하하는 링그들을 사용할 것입니다.
이제 목록의 폰들에 대한 이미지와 링크를 볼 수 있을 것입니다.
스텝 5와 6의 중요한 차이점들은 아래와 같습니다.
Data
phones.json 파일이 각 폰들에 대한 unique id와 이미지 url을 포함하는 것을 확인 할 수 있습니다. url은 app/img/phones/ 폴더를 가르킵니다.
app/phones/phones.json (sample snippet)
Template
app/index.html
href attribute 값에서 사용된 익숙하지 않은 double-curly brace binding을 이용해서 생성한 동적 링크는 폰의 상세 페이지로 연결될 것 입니다. 스텝2에서 element content로서 {{phone.name}} binding을 추가했습니다. 이번 스텝에서는 element attribute에서 {{phone.id}} binding을 사용했습니다.
또한 ngSrc directive를 이용한 이미지(img) 태그를 사용하여 각 항목 옆에서 폰 이미지를 추가했습니다. 이 directive는 브라우저가 angular {{ expression }} 마크업으로 그대로 처리하는 것과 일반적인 src attribute를 이용해서 attribute binding을 명시했을 때 유효하지 않은 url인 http://localhost:8000/app/{{phone.imageUrl}}로 request를 초기화 하는 것을 막습니다. ngSrc directive를 사용하는 것은 브라우저가 유효하지않은 곳으로 http request를 생성하는 것을 막습니다.
Test
test/e2e/scenarios.js
다음 스텝에서 구현할 폰 view에 대한 링크를 app이 정확히 생성하는지를 검증하는 새로운 end-to-end 테스트를 추가했습니다.
아래 항목 중 하나를 선택해서 테스트를 확인해 볼 수 있습니다.
- ./scripts/e2e-test.sh 를 재실행 합니다.
- end-to-end test runner의 브라우저 탭을 refresh 합니다.
- Angular 서버를 실행해서 확인 해 볼 수 있습니다.