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 instructor
• Twitter: @mauricedb
• Blog: http://msmvps.com/blogs/TheProblemSolver/
• Web: http://www.TheProblemSolver.nl
• E-mail: maurice.de.beijer@gmail.com
3
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
AngularJS
5
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
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 sooner
11
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
Single Page Applications cons
• SPA’s can be hard to maintain
– Less structure out of the box
– Hard to maintain when large
13
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 to reduce markup repetition
15
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

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

  • 1.
    Building great SPA’swith AngularJS, ASP.NET MVC and WebAPI
  • 2.
    What are wegoing 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 JavaScriptMVC 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.
  • 6.
    AngularJS cons • LargeJavaScript 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.
  • 8.
    ASP.NET WebAPI • Makesit easy to serve up data in a RESTful manner • Easy to consume from AngularJS – $resource – $http 8
  • 9.
  • 10.
    ASP.NET MVC • Powerfulserver 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 Applicationscons • SPA’s can be hard to maintain – Less structure out of the box – Hard to maintain when large 13
  • 14.
  • 15.
    The best ofboth 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 ofboth worlds Demo 16
  • 17.
  • 18.
    18 A big thankyou to our sponsors Gold Partners Silver & Track Partners Platinum Partners