3. WebCamp 폴더에 다시 Templates 폴더를 만들고 SPA의 리스트와 상세보기 기능에 사용할 UI를 따로 만들어 놓자. Templates 폴더에 SpeakerList.html 파일로 HTML 파일을 생성하고 다음과 같이 코드를 작성한다.

▼  /wwwroot/app/WebCamp/Templates/SpeakerList.html

<h2>{{ title }} <span class=“glyphicon glyphicon-thumbs-up”></span></h2>

<div class=“container”>
  <div class=“row”>
      <div ng-repeat=“speaker in speakers”>
          <div class=“col-lg-3 col-md-4 col-sm-6 col-xs-12 thumbnail”>
              <a href=”#/SpeakerDetails/{{ speakers.indexOf(speaker) }}”
                 class=“pull-right”>
                  <img src=“http://placeimg.com/100/100/any"
                          alt=”{{ speaker.name }}” class=“img-thumbnail” />
              </a>
              <h3>{{ speaker.name }}</h3>
              <span>{{ speaker.title }}</span>
              <div class=“clearfix visible-xs”></div>
          </div>
      </div>
  </div>
</div>

---