Getting started with hot towel spa


Published on

Hot Towel SPA getting started Guide

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Getting started with hot towel spa

  1. 1. Parth Pandya Skype:parth1729 Twitter:@parth1729
  2. 2.  Application contained in only page and all other resource are dynamically loaded in single page container  Some of benefits of it is ◦ You can easily make them compatible with different devices (Such as mobile and web browsers) ◦ Being single page application it has reach user experience and less round tripping to server
  3. 3.  Set of library as part of the visual studio template that can be used to SPA  It contains ◦ Durandal(For navigation) ◦ Knockout(For binding) ◦ Breeze(For client side data access) ◦ Toastr (For messages) ◦ Twitter bootstrap(For mobile compatibility and CSS styling)
  4. 4.  Download WebTools 2012.2 update 2/18/announcing-release-of-asp-net-and-web- tools-2012-2-update.aspx or Install nuget package for HotTowel  Follow jonh papa’s blog at or go through Contents?courseName=single-page-apps- jumpstart and download complete plurasight code from pStartFinal
  5. 5. •In HotTowel one can see App folder which contains overall structure of the application and the way it is going to behave • Durandal folder contains navigation logic for viewmodel , view and provide proper mapping between different folder part of the project • Shell.js contains navigation details and project startup events. We can use activate or boot events in order to register startup parameters for the in our SPA or add new pages navigation inside boot function. • Services folder contains various services that we are planning to use throughout our application such as logger.js is already there for showing toaster message. Similarly, we can create services that will talk to our controller for retrieving data •Viewmodels foder will contain JavaScript files where will put logic to bind ui and call services to save data •Views folder will contain html files where we will be putting UI markups
  6. 6.  Add new link in navigation (shell.js) router.mapNav('employee');  Add employee.js and employee.html viewmodels and view respectively  Modify content on employee.html and run the application in order to see that the content are reflected properly
  7. 7.  Create a model named Employee with Id and Name property  Run Enalbe-Migration command (Enable- Migrations -ContextTypeName HotTowelExample1.Models.EmployeeDBConte xt)  Execute add-migration Initial for creating scripts for database tables  Seed data in Configuration class  Run update-database to populate data with dummy records
  8. 8.  Create a Controller in Controller folder and inherit it from ApiController and provide [BreezeController] attribute for class  Implement readonly property for ContextAccess and Metadata() method for consuming it with Breeze  Implement GetEmployees method to return all employees from BreezeController which will be consumed by our client side application
  9. 9.  In App/Services crate model.js and datacontext.js files  In datacontex.js implement a function to retreive data  Take object of breeze.EntityQuery for querying breeze controller and configure manager by calling registerEntityTypeCtor on each entity to be used in javascript  This part is written in model.js file  Create function getEmpoyees to retreive and set observable collecton to be used by UI
  10. 10.  In ViewModel(employee.js) create file to return observable to be used in view. Include observable as part of return vm as to be consumable with view  Observable array will be passed to data context for loading data and will be set with employeeObservable(data.results)  Use knockout binding to on UI  Tip:() use to evaluate knockout properties
  11. 11.  Example for the slide can be found at xwt/