First Single Page App (SPA) using Hot Towel SPA Template

In this post, I will be creating our first SPA application using Hot towel SPA template.

If you haven't installed VS.Net 2012.2 Update, then please do it now before reading further.

Step 1: Open VS.Net and start creating asp.net mvc application

Step 2: There are 2 default template available for creating SPA application, choose "Hot Towel SPA" template

Step 3: Ones your solution is ready, you will notice all SPA related files in App folder.  You will also notice that Hot Towel SPA (HTS) has taken care of initial plumbing of installing durandal.js, require.js, bootstrap, breeze, etc.

App Folder Stucture

• Views Folder - Contains HTML files, it will have plain html code which is used for presentation.
• ViewModels Folder - Contains Javascript files, it will have logic regarding how you are going to access model, jquery web api calls and databind related logic (Knockout)
• Services Folder - Can be used for storing global SPA code which can be shared among all SPA pages.

Special SPA Files

• Main.js File - It will contain logic for applying SPA application related settings and starting SPA application.
• Shell.js File - It will contain navigation related logic

SPA Convention

• In order to create new page in HTS, you will have to create html file in view and javascript file with same name in viewmodel.
• Example: details.html and details.js files 
• You can then write navigation logic in shell.js file.

Now lets run the application to view how it looks :)

In next post we will understand, how to perform basic customization to default HTS template.