End-to-End SPA Development

using ASP.NET and AngularJS

Gil Fink CEO and Senior Consultant, sparXys

Single Page Applications

Managers and SPA Trying to solve the puzzle of single page application…

Even the Shortened Name is Misleading…

Let’s build a SPA?

About Me • sparXys CEO and Senior consultant

• ASP.NET/IIS Microsoft MVP

• Co-author of Pro Single Page Application

Development (Apress)

• Co-author of 4 Microsoft Official Courses (MOCs)

• Co-organizer of GDG Rashlatz

Agenda • The Road to Single Page Applications

• What is a SPA?

• SPA Building Blocks

• ASP.NET MVC/Web API in the Backend

• AngularJS in the Front-End

The Road to SPAs

1990

HTML HTTP

1995 Java

Applets

1996

CSS JavaScript

Flash

1997

HTML 4

2005

Ajax is a buzzword

2006

work on HTML5

starts

2007

Silverlight Mobile Web

Traditional Websites

OMG! not this kind of traditional website please!

Traditional Native Apps

Native apps – we love installation experience… Not!

What is a SPA?

Web Application

No full page submit

No full page refresh

No embedded objects

(plugins)

Client-side templating and routing

Why to Develop SPAs? Feature Web App Native App Single Page

App

Cross Platform functionality

V X V

Client State Management

X V V

No Installation required

V X V

Web App

Native App

SP

A

SPA Building Blocks

HTML5

JavaScript Libraries

Ajax

REST

SPA

Web API

Routing

HTML5 • Supported by most modern browsers

o www.caniuse.com

• Includes new JavaScript APIs that can help to: o Store data locally

o Persist data across application shutdowns

o Communicate with the server in new ways

o Increase web performance with new specifications and APIs

Ajax • Asynchronous JavaScript and XML

o No XML these days…

o Asynchronous JavaScript and JSON (Ajaj) today

• Asynchronously call server endpoints

• You can o Maintain state in the client side

o Go to the server asynchronously

o Render elements without full page refresh using JavaScript

JavaScript Libraries/Frameworks

Any application that can be written in

JavaScript, will eventually be written in JavaScript

Atwood's Law

REST • REpresntational State Transfer

• Architecture style for working with HTTP

• Using HTTP verbs (POST, GET, PUT, DELETE) o Performs Create, Read, Update and Delete operations respectively

o Can also use other HTTP verbs

• Can receive and send data in variety of formats o JSON, XML, HTML, XHTML, Blob and more

Web API • The server is used mostly as API

o Each API function is an endpoint

• No need for server page rendering

• No need for server routing

Client-Side Routing • All routing is performed in the client-side

• You use a routing library/framework o Or your own implementation on top of HTML5 History API

• When a route changes o The library/framework intercepts the navigation and performs your

functionality

DEMO OurCompany SPA

Let’s Get started

Server Side

Demo File -> New Project -> ASP.NET with MVC and Web API

ASP.NET MVC 101

Controller (Input)

Model (Logic)

View (Presentation)

ASP.NET MVC Players • Model

o Responsible to hold data

o Sometimes include constraints such as validation

• View o Responsible to render the view into HTML

o Uses the Razor view engine

• Controller o Responsible for handling user requests

o User request is mapped to an action on the controller

How Does MVC Work?

Request

View

Controller

Response

Controller Handles input (HTTP requests)

View Visually represents the model

Demo MVC in Action

ASP.NET Web API 101 • Web API is designed to leverage the HTTP protocol

• Uses Convention over configuration for actions o URI + Verb = Controller + Action

• Includes a lot of HTTP concepts built-in o For example content negotiation or HTTP caching

Demo Web API in Action

ASP.NET Routing • Routing is built into ASP.NET

o Can be used by MVC and Web API

• Maps the physical files to logical URLs

• Provides meaningful URLs

• Readable for o Search engines

o End users

Demo ASP.NET Routing

How Does ASP.NET Fit for SPAs?

• ASP.NET MVC acts o As the single page generator

o As templates generator

o Can help to leverage server side mechanisms when they are needed

• ASP.NET Web API acts o As the gateway to handle server operations

o As the application API

Front-End

AngularJS? • A MVW framework

• Developed and supported by Google

• Open source

• No external dependencies

• Very opinionated

Demo Adding AngularJS to Our Project

AngularJS Building Blocks

Module Module

Module

Scope Controller Service Template

Filter Directive

Two-Way

Binding

Dependency Injection

Routing

Controllers

Module Module

Module

Scope Controller Service Template

Filter Directive Dependency

Injection

Routing

Controllers • The logic behind a view part

• Holds a child scope o Used as a view-model

• Orchestrators for o View operations through the scope

o Services

Scopes • The glue between a controller and a view

• Include properties and the functions set by

controllers that a view can later use

var myApp = angular.module(‘myApp’,[]); myApp.controller(‘MyController‘, function($scope) { $scope.message = ‘hello’; $scope.myFunc = function() { // do something } });

Demo Controllers

Services

Module Module

Module

Scope Controller Service Template

Filter Directive Dependency

Injection

Routing

Services • Singleton objects that are used to perform a

specific task

• UI independent o Shouldn’t manipulate UI elements

• Has different types o Each type has its own purpose

SERVICE TYPE DESCRIPTION

value The injector will return the exact value

factory The injector will invoke the given factory function

service The injector will use the new keyword to create the

service single instance

provider The injector will invoke the provider’s $get function

Services – Cont. • Service declaration example:

var myApp = angular.module(‘myApp’,[]); myApp.value(‘myValue’, ‘a constant value); myApp.factory(‘myFactory’, function(name) { return ‘Hi ‘ + name; }

Built-in Services • AngularJS comes with several built-in services

• You can use services such as: o $http – for communicating over HTTP with remote servers

o $resource – for communicating with REST services

o $q – for creation of promises

o $log – for logging

o $window – for communicating with the window object

o Many more

Demo Services

Directives

Module Module

Module

Scope Controller Service Template

Filter Directive Dependency

Injection

Routing

Directives • Custom HTML elements and attributes that

AngularJS recognizes as part of its ecosystem

• Allow to o Extend the existing HTML with your own elements or attributes

o Add behavior to existing elements or attributes

• Angular includes a long list of built-in directives such

as: o ng-app – to declare the main module

o ng-controller – to bind a piece of HTML to a controller

o ng-repeat – for collection iterator

o ng-eventName – add custom behavior on a specific event

o Many more

Custom Directives • You can create your own custom directives

• Use the module directive function and return a

Directive Definition Object (DDO)

• DDOs include various configuration options: o templateUrl – the URL for a template the directive will use

o Template – appends a given HTML as the child element of the element

o replace – If set to true will replace the entire element with a given

template (used with the template or templateUrl)

o scope – the scope object to use with the directive

o Many more

Custom Directives – Cont. • Custom directive example:

myApp.directive('myDialog',function () { return { restrict: ‘E’, scope: {}, template: ‘<div>{{message}}</div>’, link: function(scope, element, attrs) { scope.message = ‘hello’; } }; });

Demo Directives

Routing

Module Module

Module

Scope Controller Service Template

Filter Directive Dependency

Injection

Routing

Routing • One of the most important mechanisms in SPAs

• Enables developers to intercept route changes

• Later on, helps to replace a shell element with a

rendered document fragment

• You can use an AngularJS routing module o For example, ngRoute is a router module for AngularJS

Demo Full Example Explained

Questions?

Summary • SPAs are entire web applications built upon one

page and JavaScript interactions

• Very suitable for mobile development

• SPAs are one of the ways to build your next web apps!

Resources • Download the slide deck -

• My Blog – http://www.gilfink.net

• Follow me on Twitter – @gilfink

Thank You!

Feedback

http://tiny.cc/hybgyx