WebCamp

시삽: 레드플러스 님 
게시판 이동:
 제목 : 3. jQuery, AngularJS, Bootstrap 등을 활용한 모던 웹 클라이언트 개발
글번호: 4
작성자: Administrator ( 레드플러스 / redplus@live.com )
작성일: 2015/02/17 오후 1:49:59
조회수: 2411

현대적인 웹 프로그래밍은 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;
            }
        });
    }]);



})();

 

 
이전 글   다음 글 삭제 수정 답변 글쓰기 리스트


관련 아티클 리스트
  제       목 파일 작성자 작성일 조회
이전글 4. REST와 Ajax를 위한 ASP.NET Web API - Administrator 2015-02-17 2122
현재글 3. jQuery, AngularJS, Bootstrap 등을 활용한 모던 웹 클라이... - Administrator 2015-02-17 2411
  3-Modern Web Client Dev.pdf 3-Modern Web Client Dev.pdf(2.00 MB) Administrator 2015-04-02 1578
다음글 2. 최신 ASP.NET 기술로 웹 응용프로그램 만들기(One ASP.NET) - Administrator 2015-02-17 2184
관련 페이지 리스트
titlenamedateview
0. WebCamp 2015 소개 Administrator 2015-02-17 2334
0-Web Camp 2015 Keynote.pdf Administrator 2015-04-02 1913
Visual Studio Community 2013 소개 및 다운로드 그리고 설치 설... Administrator 2015-04-20 1899
Microsoft Azure - Azure Pass를 통한 Microsoft Azur... Administrator 2015-04-20 1750
WebCamp - 강의시 사용한 소스: DevCamp란 이름으로 Administrator 2015-08-12 1677
1. ASP.NET과 Visual Studio 2013을 활용한 최신 웹 개발 기법과... Administrator 2015-02-17 2439
01._Web 개발자들을 위한 Visual Studio 2015 확장 및 업데이트 기... Administrator 2015-03-13 1941
Visual Studio로 웹 개발시 도움이 되는 Web Essentials 확장 기... Administrator 2015-04-20 2230
Visual Studio 2013 확장 기능 jQuery Code Snippets 소... Administrator 2015-04-20 1701
02_WebCamp 웹 프로젝트 생성 및 기본 페이지 작성 그리고 Test 및 Dat... Administrator 2015-03-13 1868
- Microsoft SQL Server Data Tools 2013 설치(데이터베이... Administrator 2015-04-08 1872
03_Nuget을 사용하여 프로젝트에 jQuery, Bootstrap, Angular... Administrator 2015-03-13 1857
(영어) NuGet 사용에 대한 좋은 소개 동영상 Administrator 2015-04-08 1899
발표자료: 1-Visual Studio 2013.pdf Administrator 2015-04-02 1768
2. 최신 ASP.NET 기술로 웹 응용프로그램 만들기(One ASP.NET) Administrator 2015-02-17 2184
04. EF Scaffolding 기능을 사용하여 CRUD 기능 구현하기 Administrator 2015-03-15 1749
05. Micro ORM인 Dapper를 사용하여 데이터 조회하는 페이지 구현 Administrator 2015-03-15 2344
2-One ASP.NET.pdf Administrator 2015-04-02 1718
3. jQuery, AngularJS, Bootstrap 등을 활용한 모던 웹 클라이... Administrator 2015-02-17 2411
3-Modern Web Client Dev.pdf Administrator 2015-04-02 1578
4. REST와 Ajax를 위한 ASP.NET Web API Administrator 2015-02-17 2122
4-ASP.NET Web API.pdf Administrator 2015-04-02 1848
동영상 - Visual Studio 2015를 사용하여 초간단 Web API 만들고 ... Administrator 2015-04-10 1741
5. ASP.NET SignalR을 이용한 실시간 양방향 커뮤니케이션 구현 Administrator 2015-02-17 2090
실습: ASP.NET SignalR 초간단 채팅 만들기 Administrator 2015-03-08 2348
5-ASP.NET SignalR.pdf Administrator 2015-04-02 1688
6. Microsoft Azure Website에 웹 프로젝트 배포 및 관리 Administrator 2015-02-17 1744
6-Azure Website.pdf Administrator 2015-04-02 1666
(동영상) ASP.NET 웹 프로젝트 생성 후 Microsoft Azure 웹 앱에 ... Administrator 2015-04-21 1728
Azure WebApp 01: Microsoft 무료 Visual Studio Onl... Administrator 2015-05-14 1847
Azure WebApp 02: Azure에 웹앱 만들고 Visual Studio 20... Administrator 2015-05-14 1897
Azure WebApp 03: VSO와 Azure Web App을 함께 사용하기웹앱에... Administrator 2015-05-14 1829
Azure Web App 04: Azure Web App에 대한 환경 설정 소개하기 Administrator 2015-05-14 1826
Azure Web App 05: SQL Azure 데이터베이스 기반 Azure Web... Administrator 2015-05-14 1815
Azure 웹 앱 01: 01 Azure 웹 앱 처음으로 만들어 보기 Administrator 2016-01-13 1827
Azure 웹앱 02: 02 Azure 웹 앱을 오픈소스인 DNN Platform을 ... Administrator 2016-01-13 1938
7. 미니 프로젝트: Build, Deploy, Scale Administrator 2015-02-17 1658
7-Conclusion.pdf Administrator 2015-04-02 1812
1. 클래스 설계 : Maxim Administrator 2015-04-14 1843
2. EF Code First Administrator 2015-04-14 1629
3. MaximServiceRepository.cs Administrator 2015-04-14 1658
4. MaximServiceController.cs Administrator 2015-04-14 1624
5. ASP.NET Web API + jQuery: MaximCrudWithJavaS... Administrator 2015-04-14 1913
6. ASP.NET Web API + AngularJS + Bootstrap: Max... Administrator 2015-04-14 1752
8. 데모 소스 다운로드 링크 Administrator 2015-03-19 1974
데모 소스 실행 순서 Administrator 2015-06-03 1727
추천 경로 Administrator 2015-11-25 1687
ASP.NET 5 MVC 6 Administrator 2016-01-12 1815
ASP.NET 5 MVC6에서 제공하는 빈 템플릿을 사용하여 웹 사이트 만들고 실행하... Administrator 2016-01-12 1658
ASP.NET 5 MVC 6 빠르게 살펴보기 Administrator 2016-01-12 2390
SQL Server 데이터베이스 프로젝트 샘플: DotNetNote.Database Administrator 2016-01-20 1843
ASP.NET Core 1.0(ASP.NET 5) 게시판 및 데모 샘플 프로젝트: D... Administrator 2016-01-20 1942
Azure Camp 2018-08-24 Administrator 2018-08-20 1656
Azure HOL 2018-08-24 Administrator 2018-08-20 1455
Azure HOL Administrator 2018-10-08 1476
Azure Camp Slide Administrator 2018-10-08 1379
Azure Camp 20181211.pdf Administrator 2018-12-07 1472
Azure HOL 20181207.pdf Administrator 2018-12-07 1433
 
 
 
손님 사용자 Anonymous (손님)
로그인 Home