Hot Towel şablonu
tarafından Mads Kristensen
Sıcak Havlu MVC Şablonu John Papa tarafından yazılmıştır
hangi sürümün indirileceğini seçin:
Visual Studio 2012 için Hot Towel MVC Şablonu
Visual Studio 2013 için Sıcak Havlu MVC Şablonu
Sıcak Havlu: Çünkü SPA'ya biri olmadan gitmek istemezsiniz!
SPA oluşturmak istiyor ancak nereden başlayacağına karar veremiyor musunuz? Hot Towel kullanın ve saniyeler içinde bir SPA'nız ve üzerine inşa etmeniz gereken tüm araçlara sahip olacaksınız!
Hot Towel, ASP.NET ile Tek Sayfalı Uygulama (SPA) oluşturmak için harika bir başlangıç noktası oluşturur. İlk olarak kodunuz için modüler bir yapı sağlar, gezintiyi, veri bağlamayı, zengin veri yönetimini ve basit ama zarif bir stil sunar. Hot Towel, SPA oluşturmak için ihtiyacınız olan her şeyi sağlar, böylece tesisata değil uygulamanıza odaklanabilirsiniz.
John Papa'nın videoları, öğreticileri ve Pluralsight kurslarından SPA oluşturma hakkında daha fazla bilgi edinin.
Uygulama Yapısı
Hot Towel SPA, uygulamanızı tanımlayan JavaScript ve HTML dosyalarını içeren bir Uygulama klasörü sağlar.
Uygulama klasörünün içinde:
- durandal
- services
- görünüm modelleri
- görünümler
Uygulama klasörü bir modül koleksiyonu içerir. Bu modüller işlevleri kapsüller ve diğer modüllerde bağımlılıkları bildirir. Görünümler klasörü uygulamanızın HTML'sini, viewmodels klasörü ise görünümler için sunu mantığını (ortak bir MVVM düzeni) içerir. Services klasörü, http veri alma veya yerel depolama etkileşimi gibi uygulamanızın ihtiyaç duyabileceği tüm yaygın hizmetleri barındırmak için idealdir. Birden çok görünüm modelinde hizmet modüllerinden kodu yeniden kullanmak yaygın bir durumdur.
MVC Sunucu Tarafı Uygulama Yapısını ASP.NET
Hot Towel tanıdık ve güçlü ASP.NET MVC yapısını temel alır.
- App_Start
- Content
- Denetleyiciler
- Modeller
- Betikler
- Görünümler
Öne Çıkan Kitaplıklar
- ASP.NET MVC
- ASP.NET Web API
- ASP.NET Web İyileştirme - paketleme ve küçültme
- Breeze.js - zengin veri yönetimi
- Durandal.js - gezinti ve Görünüm kompozisyonu
- Knockout.js - veri bağlamaları
- Require.js - AMD ve iyileştirme ile modülerlik
- Toastr.js - açılır iletiler
- Twitter Bootstrap - güçlü CSS stili
Visual Studio 2012 Hot Towel SPA Şablonu aracılığıyla yükleme
Hot Towel, Visual Studio 2012 şablonu olarak yüklenebilir. Öğesine tıklayıp File
| New Project
öğesini seçmeniz yeter.ASP.NET MVC 4 Web Application
Sonra 'Sıcak Havlu Tek Sayfalı Uygulama' şablonunu seçin ve çalıştırın!
NuGet Paketi aracılığıyla yükleme
Hot Towel ayrıca mevcut boş ASP.NET MVC projelerini genişleten bir NuGet paketidir. Nuget kullanarak yüklemeniz ve ardından çalıştırmanız yeter!
Install-Package HotTowel
Sıcak havlu üzerine nasıl inşa ederim?
Kod eklemeye başlamanız yeterlidir!
- Tercihen Entity Framework ve WebAPI (Breeze.js ile gerçekten parlayan) kendi sunucu tarafı kodunuzu ekleyin
- Klasöre
App/views
görünüm ekleme - Klasöre
App/viewmodels
görünüm modelleri ekleme - Yeni görünümlerinize HTML ve Knockout veri bağlamaları ekleme
- içindeki gezinti yollarını güncelleştirme
shell.js
HTML/JavaScript için izlenecek yol
Views/HotTowel/index.cshtml
index.cshtml, MVC uygulamasının başlangıç yolu ve görünümüdür. Beklediğiniz tüm standart meta etiketleri, css bağlantılarını ve JavaScript başvurularını içerir. Gövde, tüm içeriğin (görünümleriniz) istendiğinde yerleştirileceği tek <div>
bir içerik içerir. , @Scripts.Render
Require.js kullanarak dosyanın içerdiği main.js
uygulama kodunun giriş noktasını çalıştırır. Uygulamanız yüklenirken giriş ekranı oluşturmayı göstermek için bir giriş ekranı sağlanır.
<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>
Uygulama/main.js
Dosya, main.js
uygulamanız yüklenir yüklenmez çalışacak kodu içerir. Burası gezinti yollarınızı tanımlamak, başlangıç görünümlerinizi ayarlamak ve uygulamanızın verilerini hazırlama gibi herhangi bir kurulum/önyükleme gerçekleştirmek istediğiniz yerdir.
dosyası, main.js
uygulamanın başlatılmasına yardımcı olmak için durandal'ın birkaç modülünü tanımlar. define deyimi, işlev için kullanılabilir olmaları için modül bağımlılıklarının çözümlenmesine yardımcı olur. İlk olarak hata ayıklama iletileri etkinleştirilir ve bu da uygulamanın konsol penceresine hangi olayları gerçekleştirdiği hakkında iletiler gönderir. app.start kodu durandal framework'e uygulamayı başlatmasını söyler. Kurallar, durandal'ın sırasıyla tüm görünümlerin ve görünüm modellerinin aynı adlandırılmış klasörlerde bulunduğunu bilmesi için ayarlanır. Son olarak, app.setRoot
tekmeler önceden tanımlanmış entrance
bir animasyon kullanarak öğesini shell
yükler.
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');
});
});
Görünümler
Görünümler klasöründe bulunur App/views
.
shell.html
, shell.html
HTML'nizin ana düzenini içerir. Diğer görünümlerinizin tümü, görünümünüzün shell
yanında bir yerde oluşturulacaktır. Hot Towel üç bölge sağlar shell
: üst bilgi, içerik alanı ve alt bilgi. Bu bölgelerin her biri, istendiğinde diğer görünümlerle birlikte yüklenir.
compose
Üst bilgi ve alt bilgi bağlamaları, sırasıyla ve footer
görünümlerini işaret etmek için nav
Hot Towel'da sabit kodlanmıştır. Bölümün #content
oluşturma bağlaması modülün router
etkin öğesine bağlıdır. Başka bir deyişle, bir gezinti bağlantısına tıkladığınızda ilgili görünüm bu alana yüklenir.
<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 için gezinti bağlantılarını içerir. Burası, örneğin menü yapısının yerleştirilebileceği yerdir. Genellikle bu, içinde tanımladığınız gezintiyi router
görüntülemek için modüle veri bağlıdır (Knockout kullanılarak).shell.js
Knockout, veri bağlama özniteliklerini arar ve bunları görünüm modeline shell
bağlayarak gezinti yollarını görüntüler ve modül bir görünümden diğerine geçişin ortasındaysa router
bir ilerleme çubuğu (Twitter Bootstrap kullanarak) gösterir (bkz 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 ve details.html
Bu görünümler özel görünümler için HTML içerir. Görünümün menüsündeki home
nav
bağlantıya tıklandığında, home
görünüm görünümün içerik alanına shell
yerleştirilir. Bu görünümler değiştirilebilir veya kendi özel görünümlerinizle değiştirilebilir.
footer.html
, footer.html
alt bilgide, görünümün en altında görünen HTML'yi shell
içerir.
Görünüm Modelleri
ViewModels klasöründe bulunur App/viewmodels
.
shell.js
Görünüm shell
modeli, görünüme shell
bağlı özellikler ve işlevler içerir. Genellikle burası menü gezinti bağlamalarının bulunduğu yerdir (mantığa router.mapNav
bakın).
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 ve details.js
Bu görünüm modelleri, görünüme home
bağlı özellikleri ve işlevleri içerir. ayrıca görünümün sunu mantığını içerir ve veriler ile görünüm arasındaki tutkaldır.
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;
}
});
Hizmetler
Hizmetler, Uygulama/hizmetler klasöründe bulunur. İdeal olarak, uzak verileri almak ve göndermekle sorumlu olan bir veri hizmeti modülü gibi gelecekteki hizmetleriniz yerleştirilebilir.
logger.js
Hot Towel, hizmetler klasöründe bir logger
modül sağlar. Modül logger
, iletileri konsola ve açılır bildirimlerde kullanıcıya günlüğe kaydetmek için idealdir.