35.2.5 따라하기 4: Angular 모듈과 컨트롤러 추가

1. 서버 측 기능으로 Web API가 만들어지고 이를 통해서 JSON 데이터를 받을 수 있게 되었다. 이제는 이를 사용하는 곳인 클라이언트 측 코드를 작성하자. DotNetNote 프로젝트의 wwwroot 폴더에 app 폴더를 생성하고, 다시 WebCamp 폴더를 하나 더 생성해 앱 단위로 구분을 짓는다. WebCamp 폴더에 WebCampApp.js 파일을 생성한 후 다음과 같이 코드를 작성한다.

▼  /wwwroot/app/WebCamp/WebCampApp.js

(function () {
  ‘use strict‘;
  
  //[!] 모듈 생성: ‘WebCampApp’ 이름으로 모듈 생성
  var WebCampApp = angular.module(‘WebCampApp‘, [
      // Angular modules
      ‘ngAnimate‘,
      ‘ngRoute‘
      
      // Custom modules
      
      // 3rd Party Modules
      
  ]);
  
  //[!] Angular 라우트 설정
  WebCampApp.config([’$routeProvider‘, function ($routeProvider) {
      $routeProvider.
          when(‘/SpeakerList‘, {
              templateUrl: ‘/app/WebCamp/Templates/SpeakerList.html‘,
              controller: ‘WebCampListController‘
          }).
          when(‘/SpeakerDetails/:id‘, {
              templateUrl: ‘/app/WebCamp/Templates/SpeakerDetails.html‘,
              controller: ‘WebCampDetailsController‘
          }).
          otherwise({
              redirectTo: ‘/SpeakerList‘
          });
  }]);
})();