Slides from my Techorama 2014 presentation

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

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
3

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
4

5. AngularJS
5

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
6

7. AngularJS
Demo
7

8. ASP.NET WebAPI
• Makes it easy to serve up data in a RESTful
manner
• Easy to consume from AngularJS
– $resource
– $http
8

9. ASP.NET WebAPI
Demo
9

10. ASP.NET MVC
• Powerful server side MVC framework
– Routing
– HTML helpers
– Editor templates
10

11. ASP.NET MVC cons
• Doing everything on the server is wasteful
– UI lag because of latency
– Need to worry about scaling sooner
11

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
12

13. Single Page Applications cons
• SPA’s can be hard to maintain
– Less structure out of the box
– Hard to maintain when large
13

14. Single Page Applications
Demo
14

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
15

16. The best of both worlds
Demo
16

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

18. 18
A big thank you to our sponsors
Gold Partners
Silver & Track Partners
Platinum Partners