제 6장: 템플릿 생성하기

이번 장에서 세션 목록을 보여주는 sessions.html과 특정한 세션의 자세한 내용을 보여주는 session.html, 두개의 템플릿을 생성합니다.

1단계: sessions 템플릿을 생성합니다.

1. conference/www/templates directory에서 playlists.html(복수)를 sessions.html으로 이름을 변경합니다.

2. 템플릿을 다음과 같이 구현합니다:

   
   <ion-view view-title="Sessions">
     <ion-content>
       <ion-list>
         <ion-item ng-repeat="session in sessions"
                   href="#/app/sessions/{{session.id}}">{{session.title}}</ion-item>
       </ion-list>
     </ion-content>
   </ion-view>
   
   

   세션 목록을 보여주기 위해서 ng-repeat 디렉티브를 사용합니다.

2단계: session 템플릿을 생성합니다.

1. playlist.html(단수)를 session.html으로 이름을 변경합니다.

2. 다음과 같이 템플릿을 구현합니다:

   
   <ion-view view-title="Session">
     <ion-content>
       <div class="list card">
         <div class="item">
           <h3>{{session.time}}</h3>
           <h2>{{session.title}}</h2>
           <p>{{session.speaker}}</p>
         </div>
         <div class="item item-body">
           <p>{{session.description}}</p>
         </div>
         <div class="item tabs tabs-secondary tabs-icon-left">
           <a class="tab-item">
             <i class="icon ion-thumbsup"></i>
             Like
           </a>
           <a class="tab-item">
             <i class="icon ion-chatbox"></i>
             Comment
           </a>
           <a class="tab-item">
             <i class="icon ion-share"></i>
             Share
           </a>
         </div>
       </div>
     </ion-content>
   </ion-view>