Hot Towel 템플릿

아티클
07/13/2023

뜨거운 수건 MVC 템플릿은 존 파파에 의해 작성되었습니다

다운로드할 버전을 선택합니다.

Visual Studio 2012용 핫 타월 MVC 템플릿

Visual Studio 2013 용 핫 타월 MVC 템플릿

뜨거운 수건 : 당신은 하나없이 SPA에 가고 싶지 않기 때문에!

SPA를 빌드하고 싶지만 시작할 위치를 결정할 수 없나요? 핫 타월을 사용하면 SPA와 빌드해야 하는 모든 도구가 몇 초 안에 제공됩니다!

핫 타월은 ASP.NET 사용하여 SPA(단일 페이지 애플리케이션)를 빌드하기 위한 좋은 시작점을 만듭니다. 코드, 보기 탐색, 데이터 바인딩, 풍부한 데이터 관리 및 단순하지만 우아한 스타일에 대한 모듈식 구조를 제공합니다. 핫 타월은 SPA를 빌드하는 데 필요한 모든 것을 제공하므로 배관이 아닌 앱에 집중할 수 있습니다.

John Papa의 비디오, 자습서 및 Pluralsight 과정에서 SPA를 빌드하는 방법에 대해 자세히 알아보세요.

응용 프로그램 구조

Hot Towel SPA는 애플리케이션을 정의하는 JavaScript 및 HTML 파일이 포함된 앱 폴더를 제공합니다.

App 폴더 내부:

Durandal
services
Viewmodel
뷰

App 폴더에는 모듈 컬렉션이 포함되어 있습니다. 이러한 모듈은 기능을 캡슐화하고 다른 모듈에 대한 종속성을 선언합니다. views 폴더에는 애플리케이션에 대한 HTML이 포함되고 viewmodels 폴더에는 보기에 대한 프레젠테이션 논리(일반적인 MVVM 패턴)가 포함됩니다. 서비스 폴더는 HTTP 데이터 검색 또는 로컬 스토리지 상호 작용과 같이 애플리케이션에 필요할 수 있는 일반적인 서비스를 수용하는 데 적합합니다. 여러 viewmodel이 서비스 모듈의 코드를 다시 사용하는 것이 일반적입니다.

MVC 서버 쪽 애플리케이션 구조 ASP.NET

핫 타월은 친숙하고 강력한 ASP.NET MVC 구조를 기반으로 합니다.

앱 시작(_S)
콘텐츠
컨트롤러
모델
스크립트
보기

Visual Studio 2012 핫 타월 SPA 템플릿을 통해 설치

핫 타월은 Visual Studio 2012 템플릿으로 설치할 수 있습니다. 를 클릭하고 File | New Project 선택 ASP.NET MVC 4 Web Application하기만 하면 됩니다. 그런 다음 , 'Hot Towel 단일 페이지 애플리케이션' 템플릿을 선택하고 실행합니다.

NuGet 패키지를 통해 설치

핫 타월은 기존 빈 ASP.NET MVC 프로젝트를 보강하는 NuGet 패키지이기도 합니다. Nuget을 사용하여 설치한 다음 실행하세요!

Install-Package HotTowel

뜨거운 수건으로 빌드하려면 어떻게 해야 하나요?

코드 추가를 시작하기만 하면 좋습니다.

사용자 고유의 서버 쪽 코드(가급적 Entity Framework 및 WebAPI)를 추가합니다(실제로 Breeze.js 함께 표시됨).
폴더에 App/views 보기 추가
폴더에 App/viewmodels viewmodels 추가
새 보기에 HTML 및 녹아웃 데이터 바인딩 추가
에서 탐색 경로 업데이트 shell.js

HTML/JavaScript 연습

Views/HotTowel/index.cshtml

index.cshtml은 MVC 애플리케이션의 시작 경로 및 뷰입니다. 여기에는 예상되는 모든 표준 메타 태그, css 링크 및 JavaScript 참조가 포함됩니다. 본문에는 요청 시 모든 콘텐츠(보기)가 배치되는 단일 <div> 항목이 포함됩니다. 는 @Scripts.Render Require.js 사용하여 파일에 포함된 main.js 애플리케이션 코드의 진입점을 실행합니다. 앱이 로드되는 동안 시작 화면을 만드는 방법을 보여 주는 시작 화면이 제공됩니다.

<body>
    <div id="applicationHost">
        @Html.Partial("_splash")
    </div>

    @Scripts.Render("~/scripts/vendor")
        <script type="text/javascript" src="~/App/durandal/amd/require.js" 
            data-main="@Url.Content("~/App/main")"></script>
</body>

앱/main.js

파일에는 main.js 앱이 로드되는 즉시 실행되는 코드가 포함되어 있습니다. 여기서 탐색 경로를 정의하고, 시작 보기를 설정하고, 애플리케이션의 데이터 초기화와 같은 설정/부트스트랩을 수행하려고 합니다.

이 파일은 main.js 애플리케이션이 시작되는 데 도움이 되는 몇 가지 durandal 모듈을 정의합니다. define 문은 함수에 사용할 수 있도록 모듈 종속성을 resolve 데 도움이 됩니다. 먼저 디버깅 메시지가 활성화되어 애플리케이션이 수행하는 이벤트에 대한 메시지를 콘솔 창으로 보냅니다. app.start 코드는 durandal 프레임워크에 애플리케이션을 시작하도록 지시합니다. durandal이 모든 뷰와 viewmodel이 각각 동일한 명명된 폴더에 포함되어 있음을 알 수 있도록 규칙이 설정됩니다. 마지막으로, kicks는 app.setRoot 미리 정의된 entrance 애니메이션을 사용하여 를 shell 로드합니다.

define(['durandal/app', 
        'durandal/viewLocator', 
        'durandal/system', 
        'durandal/plugins/router'],
    function (app, viewLocator, system, router) {

    // Enable debug message to show in the console 
    system.debug(true);

    app.start().then(function () {
        router.useConvention();
        viewLocator.useConvention();
        //Show the app by setting the root view model for our application.
        app.setRoot('viewmodels/shell', 'entrance');
    });
});

보기

보기는 폴더에 있습니다 App/views .

shell.html

shell.html 에는 HTML에 대한 master 레이아웃이 포함되어 있습니다. 다른 모든 보기는 보기의 shell 어딘가에 구성됩니다. 핫 타월은 머리글, 콘텐츠 영역 및 바닥글의 세 가지 영역을 제공합니다 shell . 이러한 각 지역은 요청 시 다른 보기를 형성하는 콘텐츠와 함께 로드됩니다.

머리글 및 바닥글에 대한 바인딩은 compose 각각 및 footer 보기를 가리키 nav 도록 핫 타월로 하드 코딩됩니다. 섹션 #content 에 대한 작성 바인딩은 모듈의 활성 항목에 router 바인딩됩니다. 즉, 탐색 링크를 클릭하면 해당 보기가 이 영역에 로드됩니다.

<div>
    <header>
        <!--ko compose: {view: 'nav'} --><!--/ko-->
    </header>
     <section id="content" class="main container-fluid">
        <!--ko compose: {model: router.activeItem, 
            afterCompose: router.afterCompose, 
            transition: 'entrance'} -->
        <!--/ko-->
    </section>
    <footer>
        <!--ko compose: {view: 'footer'} --><!--/ko-->
    </footer>
</div>

nav.html

nav.html 에는 SPA에 대한 탐색 링크가 포함되어 있습니다. 예를 들어 메뉴 구조를 배치할 수 있는 위치입니다. 이는 모듈에 router 바인딩된 데이터(Knockout 사용)로, 에서 정의한 탐색을 표시하는 경우가 많습니다 shell.js. Knockout은 데이터 바인딩 특성을 찾고 이를 viewmodel에 shell 바인딩하여 탐색 경로를 표시하고 모듈이 한 보기에서 다른 보기로 이동하는 중간에 있는 경우 router 진행률 표시줄(Twitter 부트스트랩 사용)을 표시합니다(참조 router.isNavigating).

<nav class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <a class="brand" href="/">
            <span class="title">Hot Towel SPA</span> 
        </a>
        <div class="btn-group" data-bind="foreach: router.visibleRoutes">
            <a data-bind="css: { active: isActive }, attr: { href: hash }, text: name" 
                class="btn btn-info" href="#"></a>
        </div>
        <div class="loader pull-right" data-bind="css: { active: router.isNavigating }">
            <div class="progress progress-striped active page-progress-bar">
                <div class="bar" style="width: 100px;"></div>
            </div>
        </div>
    </div>
</nav>

home.html 및 details.html

이러한 보기에는 사용자 지정 보기에 대한 HTML이 포함되어 있습니다. home 보기 메뉴의 링크를 nav 클릭하면 보기의 home 콘텐츠 영역에 보기가 shell 배치됩니다. 이러한 보기를 보강하거나 사용자 고유의 사용자 지정 보기로 바꿀 수 있습니다.

footer.html

footer.html 에는 보기 아래쪽의 바닥글에 표시되는 HTML이 포함되어 있습니다shell.

ViewModels

ViewModels는 폴더에 App/viewmodels 있습니다.

shell.js

viewmodel에는 shell 뷰에 바인딩된 속성과 함수가 shell 포함되어 있습니다. 메뉴 탐색 바인딩이 발견되는 경우가 많습니다(논리 참조 router.mapNav ).

define(['durandal/system', 'durandal/plugins/router', 'services/logger'],
    function (system, router, logger) {
        var shell = {
            activate: activate,
            router: router
        };

        return shell;

        function activate() {
            return boot();
        }

        function boot() {
            router.mapNav('home');
            router.mapNav('details');
            log('Hot Towel SPA Loaded!', null, true);
            return router.activate('home');
        }

        function log(msg, data, showToast) {
            logger.log(msg, data, system.getModuleId(shell), showToast);
        }
    });

home.js 및 details.js

이러한 viewmodel에는 보기에 바인딩된 속성과 함수가 home 포함됩니다. 또한 보기에 대한 프레젠테이션 논리를 포함하며 데이터와 뷰 사이의 접착제입니다.

define(['services/logger'], function (logger) {
    var vm = {
        activate: activate,
        title: 'Home View'
    };

    return vm;

    function activate() {
        logger.log('Home View Activated', null, 'home', true);
        return true;
    }
});

서비스

서비스는 App/services 폴더에 있습니다. 이상적으로 원격 데이터를 가져오고 게시하는 데이터 서비스 모듈과 같은 향후 서비스를 배치할 수 있습니다.

logger.js

핫 타월은 logger 서비스 폴더에 모듈을 제공합니다. 이 logger 모듈은 팝업 알림에서 콘솔 및 사용자에게 메시지를 로깅하는 데 적합합니다.

다음을 통해 공유