Build Modern Web Apps Using ASP.NET Web API and AngularJS
Download as PPTX, PDF•3 likes•3,808 views
This document discusses the development of modern web applications using ASP.NET Web API and AngularJS. It covers key concepts such as RESTful services, the features of ASP.NET Web API, and the architecture of single page applications (SPAs). The document also highlights the advantages of building RESTful services and SPAs, emphasizing their ease of use and scalability.
Build Modern Web Apps Using ASP.NET Web API and AngularJS
- 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!