이 단계에서는 썸네일과 전화 목록에 대한 일부 링크를 추가하지만 이러한 링크는 아직 작동하지 않습니다. 다음 으로이 링크를 사용하여 휴대 전화에 카테고리의 추가 정보를 표시합니다.
작업 디렉토리를 재설정하십시오.
GIT 체크 아웃 -F Step -6
이제 목록에서 휴대 전화의 사진과 링크를 볼 수 있어야합니다.
5 단계와 6 단계의 가장 중요한 차이점은 다음과 같습니다. Github의 완전히 차이를 볼 수 있습니다.
데이터
phones.json 파일에는 이제 고유 식별자와 각 전화기의 이미지 링크가 포함되어 있습니다. 이 URL은 이제 앱/IMG/전화/디렉토리를 가리 킵니다.
App/Phones/Phones.json (샘플 조각)
[{... "id": "motorola-defy-with-motoblur", "imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg", "name": "motoblur/u2122로/u2122", ...}, ...]주형
app/index.html
... <ul> <li ng-repeat = "전화로 전화 | 필터 : 쿼리 | orderby : orderprop"> <a href = "#/phones/{{phone.id}}" "> <img ng-src ="{{phone.imageurl}} "> <a <a. href = "#/phones/{{phone.id}}"> {{phone.name}} </a> <p> {{phone.snippet}} </p> </li> </ul> ...이 링크는 향후 각 폰의 세부 정보 페이지를 가리킬 것입니다. 그러나 이러한 링크를 생성하기 위해 HREF 속성에서 이미 익숙한 이중 브래킷 데이터 바인딩을 사용합니다. 2 단계에서는 {{phone.name}} 바인딩을 요소 내용으로 추가했습니다. 이 단계에서는 요소 속성에서 {{phone.id}} 바인딩을 사용합니다.
또한 각 레코드에 휴대 전화 사진을 추가합니다. <Img> SRC 속성 태그 대신 NGSRC 지시문을 사용하십시오. BAND (<img src = "{{fhone.imageurl}}">) 만 사용하는 일반 SRC 속성 만 사용하는 경우 브라우저는 AngularJS {{expression}} 태그를 직접 해석하고 불법 URLHTTP : // localhost : 8000/app/{vhone.imageurl}에 요청을 시작합니다. 브라우저가 페이지를로드 할 때 이미지를로드하도록 요청하기 때문에 AngularJS는 페이지가로드 될 때만 컴파일을 시작합니다. 브라우저가 이미지를로드하도록 요청하면 {{phone.imageurl}}은 아직 컴파일되지 않았습니다! 이 상황은이 NGSRC 지침으로 피할 것이며 브라우저는 NGSRC 지침을 사용하여 불법 주소에 대한 요청을 방지합니다.
시험
테스트/e2e/시나리오스 JS
... ( '전화 별 링크를 렌더링해야한다', function () {input ( 'query'). enth ( 'nexus'); element ( '. phones li a'). click (); excl (browser (). location (). url ()).우리는 앱이 모바일보기에 대한 올바른 링크를 생성하는지 확인하기 위해 새로운 엔드 투 엔드 테스트를 추가했으며 위는 우리의 구현입니다.
이제 브라우저를 새로 고치고 엔드 투 엔드 테스터를 사용하여 테스트 실행을 관찰하거나 AngularJS 서버에서 실행할 수 있습니다.
관행
NG-SRC 지침을 일반 SRC 속성으로 변경하십시오. FireBug, Chrome Web Inspector와 같은 도구를 사용하거나 서버의 액세스 로그를 직접 살펴보면 애플리케이션이 /app/%7B%7bphone.ImageUrl%7d%7d (또는 /app/ {{phone.imageurl}}에 불법 요청을 보냅니다.
이 문제는 브라우저가 IMG 태그가 발생할 때 아직 컴파일되지 않은 URL 주소로 요청을 즉시 보내기 때문입니다. AngularJS는 페이지가 올바른 이미지 URL 주소를 얻기 위해로드 된 후에 만 표현식을 컴파일하기 시작합니다.
요약
전화 사진과 링크를 추가 했으므로 7 단계로 이동하여 AngularJS 레이아웃 템플릿과 AngularJS가 응용 프로그램에 대한 여러 뷰를 쉽게 제공 할 수있는 방법에 대해 배웁니다.
위의 것은 AngularJS 링크 및 이미지 템플릿에 대한 정보를 편집 한 것입니다. 우리는 향후 관련 지식을 계속 추가 할 것입니다. 이 사이트를 지원 해주셔서 감사합니다!