현대적인 웹 프로그래밍은 HTML5, CSS3, JavaScript를 비롯한 많은 구성요소를 포함합니다. 이 중 전세계적으로 가장 많은 개발자로부터 주목을 받고 있는 jQuery, Bootstrap, AngularJS 등을 사용한 웹 클라이언트 개발에 대한 내용을 다룹니다.

추가적인 HOL은 아래 경로의 Modern Web Client Dev 파트 동영상 강좌를 참고하시기 바랍니다.

http://www.microsoft.com/ko-kr/events/techdaysminisat2/1st_20141122.aspx

    //[!] Angular 라우트 설정
    app.config(['$routeProvider', function ($routeProvider) {

        $routeProvider.

            when('/SpeakerList', {
                templateUrl: 'Templates/SpeakerList.html',
                controller: 'ListController'
            }).

            when('/SpeakerDetails/:Id', {
                templateUrl: 'Templates/SpeakerDetails.html',
                controller: 'DetailsController'
            }).

            otherwise({
                redirectTo: '/SpeakerList'
            });

    }]);

(function () {
    'use strict';

    angular
        .module('app')
        .controller('controller', controller);

    controller.$inject = ['$scope'];

    function controller($scope) {
        $scope.title = 'WebCamps 2015 개발자 컨퍼런스';

        activate();

        function activate() { }
    }


    // WebCamps 2015 관련 리스트/상세보기 컨트롤러
    //var techdays = angular.module('app').controller('techdays', []);
    //[a] 모듈 참조(네임스페이스)
    var techdays = angular.module('app');

    //[b] 리스트 컨트롤러
    techdays.controller('ListController', ['$scope', '$http', function ($scope, $http) {
        //[1] JSON 파일 사용: 이것을 사용하기 위해서는 Web.config 파일의 <system.webServer>에 <staticContent><mimeMap fileExtension=".json" mimeType="application/json"/></staticContent> 항목 설정 필요
        //$http.get('/App/data/speakers.json').success(function (data) {
        //    $scope.speakers = data;
        //});
        //[2] 제네릭 핸들러 사용
        //$http.get('Handlers/SpeakerHandler.ashx').success(function (data) {
        //    $scope.speakers = data;
        //});
        //[3] Web API 사용
        $http.get('/api/Speakers').success(function (data) {
            $scope.speakers = data;
        });
    }]);

    //[c] 상세보기 컨트롤러
    techdays.controller('DetailsController', ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) {


        //$http.get('Handlers/SpeakerHandler.ashx').success(function (data) {
        $http.get('/api/Speakers').success(function (data) {

            $scope.speakers = data;
            $scope.currentId = $routeParams.Id;

            if ($routeParams.Id > 0) {
                $scope.prevId = Number($routeParams.Id) - 1;
            } else {
                $scope.prevId = $scope.speakers.length - 1;
            }

            if ($routeParams.Id < $scope.speakers.length - 1) {
                $scope.nextId = Number($routeParams.Id) + 1;
            } else {
                $scope.nextId = 0;
            }
        });
    }]);



})();