16. 앞서 생성한 최근 글 리스트와 최근 댓글 리스트를 반환해주는 Web API를 사용하는 앵귤러 앱을 만들어 보자. 프로젝트 루트의 wwwroot 폴더의 app 폴더에(없으면 생성) DotNetNote 폴더를 생성한다. 이곳에 DotNetNoteApp.js라는 이름으로 자바스크립트 파일을 생성하고, 다음과 같이 코드를 작성한다. 이렇게 작성한 DotNetNoteApp.js 파일은 뒤에서 /Views/Home/Index.cshtml 페이지를 작성할 때 하단의 scripts 섹션에 포함되어 실행될 것이다.

▼  /wwwroot/app/DotNetNote/DotNetNoteApp.js

(function () {
  ‘use strict‘;
  
  // [1] Angular 모듈 선언
  var app = angular.module(‘DotNetNoteApp‘, []);
  
  // [2][1] Angular 컨트롤러 선언
  app.controller(‘RecentlyNoteListWithAngular‘
      , [’$scope‘, ‘$http‘, noteController]);
  
  // [2][2] 컨트롤러 구현부
  function noteController($scope, $http) {
      
      // Web API 주소: ASP.NET Web API로 구현
      var API_URL = ”/api/NoteService/”;
      
      // 출력: GET
      $http.get(API_URL).success(function (data) {
          $scope.notes = data;
      })
      .error(function () {
          $scope.error = “데이터를 가져오는 동안 에러가 발생했습니다. “;
      });
  }
  
  // [3][1] Angular 컨트롤러 선언
  app.controller(‘RecentlyCommentListWithAngular‘
      , [’$scope‘, ‘$http‘, commentController]);
  
  // [3][2] 컨트롤러 구현부
  function commentController($scope, $http) {
      
      // Web API 주소: ASP.NET Web API로 구현
      var API_URL = ”/api/NoteCommentService/”;
      
      // 출력: GET
      $http.get(API_URL).success(function (data) {
          $scope.comments = data;
      })
      .error(function () {
          $scope.error = “데이터를 가져오는 동안 에러가 발생했습니다. “;
      });
      
  }
})();

---