더북(TheBook)

2. Views 폴더에 Tech 폴더를 생성한 후 Tech 컨트롤러의 Index 액션에 해당하는 Index.cshtml 뷰 페이지를 다음과 같이 작성한다. 레이아웃을 따로 사용하지 않기에 angular.js와 앞서 생성한 TechApp.js와 TechController.js 파일을 직접 추가한다. 나머지 코드는 AngularJS의 전형적인 데이터 출력과 입력 관련 코드를 나타낸다.

▼  /Views/Tech/Index.cshtml

@{
  Layout = null;
}

<div ng-app=“TechApp”>
  <div ng-controller=“TechController”>
      <h2>{{ title }}</h2>
      
      <h3>출력</h3>
      <ul ng-repeat=“t in teches”>
          <li>{{ t.title }}</li>
      </ul>
      
      <h3>입력</h3>
      <div>
          기술명: <input type=“text” name=“Title” ng-model=“NewTech.Title” />
          <input type=“button” name=“name” value=“저장”
                 class=“btn btn-primary” ng-click=“add()” />
      </div>
  </div>
</div>

<script src=“~/lib/angular/angular.js”></script>
<script src=“~/app/Tech/TechApp.js”></script>
<script src=“~/app/Tech/TechController.js”></script>

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.