이 단계에서는 전화 세부 사항보기를 구현하며, 사용자가 전화 목록에서 전화를 클릭하면 표시됩니다.
작업 디렉토리를 재설정하십시오.
GIT 체크 아웃 -F Step -8
이제 목록에서 전화를 클릭하면 전화기의 자세한 정보 페이지가 표시됩니다.
휴대폰 세부 정보보기를 구현하려면 $ http를 사용하여 데이터를 얻을 수 있으며 폰-데 아일.html 뷰 템플릿을 추가합니다.
7 단계와 8 단계 사이의 가장 중요한 차이점은 다음과 같습니다. Github의 완전히 차이를 볼 수 있습니다.
데이터
phones.json 외에도 앱/ 전화/ 디렉토리에는 각 휴대 전화 정보에 대한 JSON 파일도 포함되어 있습니다.
App/Phones/Nexus-S.Json (샘플 조각)
{ "추가 피팅": "컨투어 디스플레이, 근거리 필드 통신 (NFC), ...", "Android": { "OS": "Android 2.3", "UI": "Android"}, ... "images": [ "img/phones/nexus-s.0.jpg", "img/phones/nexus-s.1.jpg", "IMG/Phones/Nexus-S.2.jpg", "IMG/Phones/Nexus-S.3.jpg"], "Storage": { "Flash": "16384MB", "RAM": "512MB"}}이러한 각 파일은 동일한 데이터 구조를 사용하여 전화의 다른 속성을 설명합니다. 이 데이터를 전화 세부 사항보기에 표시합니다.
제어 장치
우리는 $ http 서비스를 사용하여 phonelistctrl을 확장하기 위해 데이터를 얻습니다. 이전 전화 목록 컨트롤러가 작동하는 방식과 같습니다.
app/js/controllers.js
함수 phoneDetailctrl ($ scope, $ loureparams, $ http) {$ http.get ( 'phones/' + $ lourteparams.phoneid + '.json'). success (function (data) {$ scope = phone = data;});} // phonedetailctrl. '$ http'];HTTP 요청의 URL을 구성하려면 $ Route Service에서 제공 한 현재 경로에서 $ loureparams.phoneid를 추출해야합니다.
주형
Phone-Detail.html 파일의 원래 TBD 자리 표시 자 라인은 목록과 전화의 자세한 정보를 구성하는 바인딩으로 대체되었습니다. 여기서 우리는 Angularjs의 {{expression}} 태그와 ngrepeat를 사용하여보기에서 데이터 모델을 렌더링합니다.
앱/부분/phone-detail.html
<img ng-src = "{{phone.images [0]}}"> <h1> {{phone.name}} </h1> <p> {{phone.description}} </p> <ul> <li ng-repeat = "img in 전화 </li> </ul> <ul> <li> <li> <li> <li> 가용성 및 네트워크 </span> <dl> <dt> 가용성 </dt> <dd ng-repeat = "폰에서 가용성"> {availability}} </dd> </dl> </li> ... </li> <span> <dd> {{phone.additionalfeatures}} </dd> </li> </ul>시험
5 단계에서 PhonelistCtrl에 대해 쓴 것과 매우 유사한 새로운 단위 테스트를 작성해 봅시다.
테스트/단위/Controllersspec.js
... ( 'phonedetailctrl', function () {var scope, $ httpbackend, ctrl; prevereach (inject (inject (_ $ httpbackend_, $ rootscope, $ orteparams, $ 컨트롤러) {$ httpbackend = _ $ httpbackend_; $ httpbackend.expectget ( '전화 :'xyz '); {scope.phone .tobeUndefined ();./scripts/test.sh 스크립트를 실행하여 테스트를 실행하려면 다음 출력이 표시됩니다.
Chrome : 러너 리셋 .... 총 3 개의 테스트 (통과 : 3; 실패 : 0; 오류 : 0) (5.00 ms) 크롬 19.0.1084.36 Mac OS : 3 개의 테스트 실행 (전달 : 3; 실패 : 0) (5.00 ms)
동시에, 우리는 또한 엔드 투 엔드 테스트를 추가하여 Nexus의 전화 세부 정보 페이지를 가리키고 페이지 헤드가 "Nexus S"인지 확인했습니다.
테스트/e2e/시나리오스 JS
... ( '전화 세부 사항보기', function () {prevereach () {browser (). navigateto ( '../../ app/index.html#/phones/nexus-s');}); 'nexus-s page를 표시해야한다', function () {excling ( '폰.이제 브라우저를 새로 고치고 엔드 투 엔드 테스트를 다시 실행하거나 AngularJS 서버에서 실행할 수 있습니다.
관행
Nexus의 세부 정보 페이지에 표시되는 4 개의 썸네일을 확인하려면 AngularJS 엔드 투 엔드 테스트 API를 사용하여 테스트를 작성하십시오.
요약
휴대 전화 세부 정보 페이지가 준비되었으므로 9 단계에서는 디스플레이 필터를 작성하는 방법을 배웁니다.
위는 더 많은 AngularJS 템플릿에 대한 정보입니다. 우리는 향후 관련 정보를 계속 추가 할 것입니다. 이 사이트를 지원 해주셔서 감사합니다!