Search

Categories

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Send mail to the author(s) E-mail

# Monday, 18 March 2013
( SPA )

 

image
Setting up the first page of the SPA as we’ve now got our server side code read – DB / WebAPI

Durandal.js – show a view, nav from page to page, load js and html as needed, app lifecycle and events..built to handle UI plumbing.  Big wins are going to be in multiple views (and viewmodels)

 image
durandal method which helps to compose view and viewmodel (code)  (both conventionally named speakers)

uses

  • knockout.js for binding
  • require.js for modules
  • jquery for dom

ALT V+E+O   - open package manager console

toastr

durandal

image
Our js code will go in the App folder created by durandal

load all js files in sequence eg when used with durandal get all files in App when I need them

index.cshtml
main.js – turn on debugging and set root
shell.html

image
Splashscreen

image
Seeing debug output in the console window – my hand typed app didn’t work.. had to go to the code to get it working!

Data Binding with MVVM and Knockout.js

| | # 
( SPA )

Dev notes from going along with the videos:

http://www.johnpapa.net/spa/

Need VS 2012.2 Update

http://www.johnpapa.net/spa-questions/ – interesting SPA questions

3. SPA from Scratch

File New ASP.NET Empty Web App

CodeCamper is default namespace

EntityFramework – NuGet

EnittyFramework SQL Server Compact

Microsoft WebAPI

Optimization – bundling and minification

razor 2

In code resources..

App_Data has db in it. CodeCamper.sdf

App_Start

bundle.config – will makes all js smaller

webapi.config – will help setup routes for controllers

Models

classes for EF CodeFirst

CodeCamperDbContext.cs – the hookup

Controllers

SessionsController

image
A combination/projection of data

index.cshtml

image
Content/css will grab the optimization stuff which is stored in BundleConfig.cs

jquery

modernizr – browser feature detection

twitter-bootstrap – styling of buttons, divs etc

font-awesome – icons

image
F12 to get dev tools in Chrome.
Notice no minification (need to turn debug to false in web.config)

Is taking 500ms to render..whereas on video only 350ms.

Adding to mime types in web.config for fontawesome.

<staticContent>
      <remove fileExtension=".woff" />
      <remove fileExtension=".svg" />
      <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
    </staticContent>
| | #