building great spa’s with angular js, asp.net mvc and webapi

Building great SPA’s with

AngularJS, ASP.NET MVC and WebAPI

2

What are we going to talk about?

• AngularJS• ASP.NET MVC• ASP.NET WebAPI• Single Page Applications

3

Who am I?

• Maurice de Beijer• The Problem Solver• Microsoft Integration MVP• Freelance developer• DevelopMentor instructor• Twitter: @mauricedb• Blog: http://msmvps.com/blogs/TheProblemSolver/ • Web: http://www.TheProblemSolver.nl• E-mail: maurice.de.beijer@gmail.com

4

AngularJS

• Powerful JavaScript MVC framework• Makes it easy to build Single Page Applications• Focused on building CRUD applications• Very modular with Dependency Injection• Makes it relatively easy to build testable

applications

5

AngularJS

6

AngularJS cons

• Large JavaScript applications are hard to maintain

• Even a browser based application needs a server part

• Doing the same thing in every browser wastes CPU cycles

7

AngularJS

Demo

8

ASP.NET WebAPI

• Makes it easy to serve up data in a RESTful manner

• Easy to consume from AngularJS– $resource– $http

9

ASP.NET WebAPI

Demo

10

ASP.NET MVC

• Powerful server side MVC framework– Routing– HTML helpers– Editor templates

11

ASP.NET MVC cons

• Doing everything on the server is wasteful– UI lag because of latency– Need to worry about scaling sooner

12

Single Page Applications

• SPA’s are great for the end user– Responsive

• SPA’s are great for the server– Only request to the server when needed

13

Single Page Applications cons

• SPA’s can be hard to maintain– Less structure out of the box– Hard to maintain when large

14

Single Page Applications

Demo

15

The best of both worlds

• Mix ASP.NET with Angular– Use the structure of ASP.NET to create Mini SPAs– MVC HTML helpers to reduce markup repetition

16

The best of both worlds

Demo

17

Questions

?https://github.com/mauricedb/Techorama2014/

18

A big thank you to our sponsors

Gold Partners

Silver & Track Partners

Platinum Partners