Slides shows the latest trends used in building RESTful API using ASP.NET Web API and how to build SPA using AngularJS which talks to those RESTful APIs

1. Build Modern Web Apps using
ASP.NET Web API & AngularJS
Taiseer Joudeh
Senior IT Team Lead at Aramex
Twitter : @tjoudeh
Blog: http://bitof tech.net

2. Agenda
• Deep dive into ASP.NET Web API
• REST Specifications
• Build RESTful HTTP service using Web API
• Single Page Applications Overview
• SPA Frameworks
• Build simple SPA using AngularJS
• Host the project on Microsoft Azure

3. What is ASP.NET Web API?
• Framework for building HTTP based services
• Use HTTP is application protocol
• Designed for broad reach (To any client speaks HTTP!)
• HTTP != REST
• The framework does not enforce an architectural style
• Can be used with:
• ASP.NET Web Forms
• ASP.NET MVC

4. ASP.NET Web API Features
• Built on top of ASP.NET Stack
• Native Support for ASP.NET Routing
• Convention over Configuration
• Native abstraction on top of raw HTTP protocol
• Brand new HTTP client toolkit
• High level of scalability on architecture and on the cloud
• Easily build RESTful compliant Services

5. What is RESTful Services?
• REST = Representation State Transfer
• Stateless architect which runs over HTTP (Not a protocol)
• Four basic design principals for RESTful services:
1. Use HTTP Verbs only to interact with resources
2. Interaction with resources is stateless, request/response contain all
information
3. Resources identified by URIs only (Services Discovery)
4. Content Negotiation (Support for XML/JSON)

6. Resources in RESTful Services
Operation HTTP Verb ResourceURI
Get all students GET /api/students
Create a new student POST /api/students
Get a student GET /api/students/{username}
Update a student PUT /api/students/{username}
Delete a student DELETE /api/students/{username}

7. Why to build RESTful Services?
• Can be easily consumed by any client (Mobile Apps, SPA, Desktop
Apps, Service to Service, etc…)
• Lightweight (No XML parsing, less bandwidth, just the payloads)
• Easier to learn and build, you can get up running quickly.
• Closer to Web design specification, all about HTTP protocol.

8. Demo

9. To implement a Web API…..
• Derive from API Controller
• Implement your HTTP Methods
• Maps URI space to your API controllers
• Ex: api/{controller}/{id}
• {controller} + “Controller ” = ApiController Type Name
• Simple types are taken from URI
• Route data, query parameters
• Complex types come from the body
• MediaTypeFormaters are configured to deserialize request body based on content
type
• JSON, XML, and form-url-encoded are supported out of the box

10. Demo

11. What is SPA?
• Single Page Application – Bad Name maybe! (Rich Web
Applications)
• Load all necessary resources up-front with single page load (shell
page)
• Bring the desktop experience to the web – Partial loads
• Built entirely with JS and HTML

12. Motivations to build SPA
• Rich user experience – faster responses
• Reduce round tripping between client and the server
• Reach – SPAs can reach different users on different platforms.

13. SPA Architecture Philosophy
• Thin Stateless Server
• Role is a service (RESTful API is important)
• Stateless server…easy to scale
• Strong separation of concerns which leads to lower network latency, less
bandwidth usage, snappy response
• MVC at the Client
• View: sets on top of the architecture (Think of page).
• Model: set at the bottom of the architecture, holds the data for the view
• Controller: Sets in between, orchestrator between View and Model, handle
business logic

14. SPA Frameworks
• Consider framework with features:
• Browser history management (Support for back button)
• Templating engine (Mustache, Handlebars, etc…)
• Two way data binding
• Routing service
• Framework examples:
• AngularJS
• EmberJS
• BackboneJS

15. Thank You!