This document discusses end-to-end single page application development using ASP.NET and AngularJS. It begins with an introduction to SPAs and their benefits. It then covers key SPA building blocks like HTML5, JavaScript libraries, Ajax, REST, routing, and AngularJS components like controllers, services, directives and routing. It demonstrates using ASP.NET MVC and Web API for the backend API and services. AngularJS is used for the frontend framework. The presentation includes demos of key concepts and a full example app to demonstrate an end-to-end SPA. It concludes with questions and resources for further learning.

1. End-to-End SPA Development
using ASP.NET and AngularJS
Gil Fink
CEO and Senior Consultant, sparXys

2. Single Page Applications

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

4. Even the Shortened Name
is Misleading…
Let’s build a SPA?

5. 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

6. 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

7. 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

8. Traditional Websites
OMG! not this kind of traditional website please!

9. Traditional Native Apps
Native apps – we love installation experience… Not!

10. What is a SPA?
Web Application
No full page
submit
No full page
refresh
No embedded
objects
(plugins)
Client-side
templating
and routing

11. 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
SPA

12. SPA Building Blocks
HTML5
JavaScript Libraries
Ajax
REST
SPA
Web API
Routing

13. 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

14. 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

15. JavaScript
Libraries/Frameworks

16. Any application that can be
written in
JavaScript, will eventually
be written in JavaScript
Atwood's Law

17. 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

18. 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

19. 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

20. DEMO
OurCompany SPA

21. Let’s Get started

22. Server Side

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

25. ASP.NET MVC 101
Controller
(Input)
Model
(Logic)
View
(Presentation)

26. 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

27. How Does MVC Work?
Request
View
Controller
Response
Controller
Handles input
(HTTP requests)
View
Visually represents
the model

28. Demo
MVC in Action

29. 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

30. Demo
Web API in Action

31. 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

32. Demo
ASP.NET Routing

33. 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

34. Front-End

36. AngularJS?
• A MVW framework
• Developed and supported by Google
• Open source
• No external dependencies
• Very opinionated

37. Demo
Adding AngularJS to Our Project

38. AngularJS Building
Blocks
Module
Module
Module
Scope Controller ServiceTemplate
Filter Directive
Two-
Way
Binding
Dependency
Injection
Routing

39. Controllers
Module
Module
Module
Scope Controller ServiceTemplate
Filter Directive
Dependency
Injection
Routing

40. 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

41. 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
}
});

42. Demo
Controllers

43. Services
Module
Module
Module
Scope Controller ServiceTemplate
Filter Directive
Dependency
Injection
Routing

44. 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

45. Services – Cont.
• Service declaration example:
var myApp = angular.module(‘myApp’,[]);
myApp.value(‘myValue’, ‘a constant value);
myApp.factory(‘myFactory’, function(name) {
return ‘Hi ‘ + name;
}

46. 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

47. Demo
Services

48. Directives
Module
Module
Module
Scope Controller ServiceTemplate
Filter Directive
Dependency
Injection
Routing

49. 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

50. 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

51. 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’;
}
};
});

52. Demo
Directives

53. Routing
Module
Module
Module
Scope Controller ServiceTemplate
Filter Directive
Dependency
Injection
Routing

54. 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

55. Demo
Full Example Explained

56. Questions?

57. 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!

58. Resources
• Download the slide deck -
• My Blog – http://www.gilfink.net
• Follow me on Twitter – @gilfink

59. Thank You!

60. Feedback
http://tiny.cc/hybgyx