Building great SPA’s with
AngularJS, ASP.NET MVC and WebAPI
What are we going to talk about?
• AngularJS
• ASP.NET MVC
• ASP.NET WebAPI
• Single Page Applications
2
Who am I?
• Maurice de Beijer
• The Problem Solver
• Microsoft Integration MVP
• Freelance developer
• DevelopMentor instr...
AngularJS
• Powerful JavaScript MVC framework
• Makes it easy to build Single Page Applications
• Focused on building CRUD...
AngularJS
5
AngularJS cons
• Large JavaScript applications are hard to
maintain
• Even a browser based application needs a
server part...
AngularJS
Demo
7
ASP.NET WebAPI
• Makes it easy to serve up data in a RESTful
manner
• Easy to consume from AngularJS
– $resource
– $http
8
ASP.NET WebAPI
Demo
9
ASP.NET MVC
• Powerful server side MVC framework
– Routing
– HTML helpers
– Editor templates
10
ASP.NET MVC cons
• Doing everything on the server is wasteful
– UI lag because of latency
– Need to worry about scaling so...
Single Page Applications
• SPA’s are great for the end user
– Responsive
• SPA’s are great for the server
– Only request t...
Single Page Applications cons
• SPA’s can be hard to maintain
– Less structure out of the box
– Hard to maintain when larg...
Single Page Applications
Demo
14
The best of both worlds
• Mix ASP.NET with Angular
– Use the structure of ASP.NET to create Mini SPAs
– MVC HTML helpers t...
The best of both worlds
Demo
16
Questions
?
https://github.com/mauricedb/Techorama2014/
17
18
A big thank you to our sponsors
Gold Partners
Silver & Track Partners
Platinum Partners
Upcoming SlideShare
Loading in …5
×

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

6,508 views

Published on

Slides from my Techorama 2014 presentation

Published in: Software
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,508
On SlideShare
0
From Embeds
0
Number of Embeds
139
Actions
Shares
0
Downloads
38
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

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

  1. 1. Building great SPA’s with AngularJS, ASP.NET MVC and WebAPI
  2. 2. What are we going to talk about? • AngularJS • ASP.NET MVC • ASP.NET WebAPI • Single Page Applications 2
  3. 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. 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. 5. AngularJS 5
  6. 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. 7. AngularJS Demo 7
  8. 8. ASP.NET WebAPI • Makes it easy to serve up data in a RESTful manner • Easy to consume from AngularJS – $resource – $http 8
  9. 9. ASP.NET WebAPI Demo 9
  10. 10. ASP.NET MVC • Powerful server side MVC framework – Routing – HTML helpers – Editor templates 10
  11. 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. 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. 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. 14. Single Page Applications Demo 14
  15. 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. 16. The best of both worlds Demo 16
  17. 17. Questions ? https://github.com/mauricedb/Techorama2014/ 17
  18. 18. 18 A big thank you to our sponsors Gold Partners Silver & Track Partners Platinum Partners

×