PhoneCat Tutorial App 7 - Templating Links & Images

이번 장에서는 폰 리스트안에 폰 썸네일을 추가 할 것입니다. 
그리고 어딘지는 모를 알수 없는 곳으로 갈 링크를 붙이게 됩니다.
그 다음엔, 추가적인 정보인 카탈로그안에 폰에 관해서 보여주는 링크들을 사용 할 것입니다.
지금 리스트 안에 폰 이미지와 링크가 있습니다.
가장 중요한 변경사항들을 아래 리스트되어 있습니다. 전체 다른점을 깃허브에서 볼 수 있습니다.

Data

phones.json 파일은 유니크한 ID 와 이미지 URL 각각의 폰에 대한 포함하고 있다는 것을 주목하세요. 
URL은 app/img/phones/ 디렉토리을 가리키고 있습니다.
app/phones/phones.json (sample snippet):

Template

app/index.html

 

향후에 폰 디테일 페이지로 이어지는 링크를 다이나믹하게 생성하기 위해, 
우리는 익숙한 {{}} 바인딩을 href 속성 값 안에 사용했습니다.
두 번째 단계로, {{phone.name}} 바인딩을 요소(Element) 내용으로 추가 했습니다.
이번 단계에서 {{phone.id}} 바인딩은 요소(Element) 속성에서 사용 되어 졌습니다.
또한 폰 이미지들을 다음 각각의 레코드들에  ngSrc 지시어와 함께 이미지 태그를 사용해서 추가 합니다.
이 지시어는 브라우저가 Angular {{expression}} 마크업으로 문자 그대로 간주하는 것을 막고 ,
만약 우리가 일반 src 속성 (<img src=”{{phone.imageUrl}}”>)에 바인딩한 속성으로 명시해 왔다면, 
잘못된 url http://localhost:8000/app/{{phone.imageUrl}}로 요청을 발생 했을 것입니다.
ngSrc 지시어 사용은 브라우저가 잘못된 위치로의 http 요청을 만드는 것으로부터 막아줍니다.

Test

Test/e2e/scenarios.js

우리가 다음 스텝에서 구현할 폰 View로 링크를 정확하게 생성하는 어플리케이션인지 검증하기 위해 새로운 E2E 테스트를 추가 할 것 입니다.
여러분은 npm run protractor 를 동작 시키시길 바랍니다. 테스트가 돌아가는 것을 보려면요.

Experiments

ng-src 지시어를 예전 src로 바꿔보세요.
Firebug 또는 크롬 웹 inspector 또는 웹서버 접속 로그의 인스팩팅 을 사용해서 어플리케이션이 /app/%7B%7Bphone.imageUrl%7D%7D (or /app/{{phone.imageUrl}}) 이라고 외부 요청을 정말 만드는 지 확인해보세요.

여기 이 이슈는 브라우저가 이전 Angular가 표현을 평가하고 정확한 주소를 주입하는 기회를 가진 그 이미지 태그를 치자마자 잘못된 이미지 주소를 위해 요청을 발생 것입니다.

Summary

지금 폰 이미지들과 링크들을 추가했고, Angular 레이아웃 템플릿을 배우고 어떻게 Angular가 다중 View들을 갖는 어플리케이션을 쉽게 만드는지 7장으로 가세요.