35.2.6 따라하기 5: SPA 메인 페이지 작성하기

1. Angular 모듈과 컨트롤러 그리고 리스트와 상세보기를 담당하는 템플릿 페이지를 따로 만들었으면 이를 한곳에 모아서 출력해주는 메인 페이지를 꾸며보자. Views/WebCamps/Index.cshtml 파일을 열고 기존 코드를 지운 후 다음과 같이 코드를 작성한다. 참고로 좌우 배너의 이미지 태그에 지정하는 이미지 파일은 책의 소스를 내려받은 후 DotNetNote 프로젝트의 images 폴더에서 찾을 수 있다. 물론 다른 이미지로 대체해도 무관하다.

▼  /Views/WebCamp/Index.cshtml

@{
  ViewData[“Title”] = “웹캠프 세션 스피커 리스트”;
}

<div class=“row”>
  <div class=“visible-lg col-lg-2”>
      <img src=“~/images/Banner-WC.png” class=“img-responsive” />
  </div>
  <div class=“col-lg-8 col-md-12”>
      <div class=“row”>
          <div class=“jumbotron”>
              <h1>웹 캠프 2016</h1>
              <p>
                  “오픈소스 및 크로스 플랫폼 개발자와의 소통”
                  WebCamp 2016 개발자 컨퍼런스에 초대합니다!
              </p>
              <p>
                  <a href=”#” class=“btn btn-info btn-lg”>
                      Learn more &raquo;
                  </a>
              </p>
          </div>
      </div>
      <div class=“row”>
          <div class=“col-lg-4 col-md-4 col-sm-6”>
              <h2>Angular</h2>
              <p>AnguarJS는 JavaScript MVC/SPA 프레임워크입니다.</p>
              <p>
                  <a href=“http://www.angularjs.org"
                     class=“btn btn-primary”>Learn more &raquo;</a>
              </p>
          </div>
          <div class=“col-lg-4 col-md-4 col-sm-6”>
              <h2>Bootstrap</h2>
              <p>Bootstrap은 UI 프레임워크입니다.</p>
              <p>
                  <a href=“http://www.getbootstrap.com"
                     class=“btn btn-default”>Learn more &raquo;</a>
              </p>
          </div>
          <div class=“col-lg-4 col-md-4 col-sm-6”>
              <h2>C#(ASP.NET)</h2>
              <p>크로스 플랫폼 개발 환경입니다.</p>
              <p>
                  <a href=“http://www.asp.net"
                     class=“btn btn-danger”>Learn more &raquo;</a>
              </p>
          </div>
      </div>
      <div class=“row visible-lg”>
          <div class=“alert alert-danger text-center”>
              <h4>양쪽 배너는 큰 화면(1200px 이상)에서만 보입니다.</h4>
          </div>
      </div>
  </div>
  <div class=“visible-lg col-lg-2”>
      <img src=“~/images/Banner-RED.png” class=“img-responsive” />
  </div>
</div>

<hr />

<div ng-app=“WebCampApp”>
  <div ng-controller=“WebCampController”>
      <h1>{{ title }}</h1>
  </div>
  
  <div ng-view></div>

</div>

@section scripts {
  <script src=“~/lib/angular-animate/angular-animate.min.js”></script>
  <script src=“~/lib/angular-route/angular-route.min.js”></script>
  <script src=“~/app/WebCamp/WebCampApp.js”></script>
  <script src=“~/app/WebCamp/WebCampController.js”></script>
}

---