Angular HTTP Communication

Name: Angular HTTP Communication
Rating: 4.8 (49 reviews)

Learn basics, as well as advanced features of Angular HTTP

Created byGet Arrays

Last updated 7/2021

English

What you'll learn

Learn basics, as well as advanced features of Angular HTTP

Course content

6 sections • 58 lectures • 3h 40m total length

Overview1:34
Prerequisites1:50
Environment Setup2:51
Set up a practical Angular development environment with Visual Studio Code or any editor, Chrome or other browsers, and a terminal for Angular CLI commands.
What is Angular1:50
What is HTTP1:27
RESTful Web Service2:26
RESTful CRUD and HTTP3:09
Angular HTTP Communication2:00
Explore how Angular client communicates with backend services over http, sending requests (get, post, put, patch, delete) and receiving responses to perform create, read, update, and delete operations.
Asking Questions and Source Code0:48

Creating Angular Application1:00
Angular HTTP Configuration - Part 10:39
Angular HTTP Configuration - Part 21:02
Angular Services1:50
Creating Angular Service2:36
Injecting HTTP Client - Part 11:09
Injecting HTTP Client - Part 21:10
Import the http client from the same module and inject it into the class via a private constructor parameter, then access it with this to build back end requests.
Using HTTP Client - Part 12:54
Free API - JSON Placeholder0:47
Using HTTP Client - Part 21:26
Mapping Http Response Type5:18
Subscribing to Observables - Part 114:21
Understand how observables emit data via subscribers and subscriptions without blocking, using next, error, and complete callbacks. Subscribe to trigger execution and handle the ECB response, including error handling.
Subscribing to Observables - Part 24:34
Learn to inject a user service, call get users, and subscribe to observables in ngOnInit to retrieve and log user data from an API.
Environment Variable3:41
Set up an environment variable to manage the api base url for development and production, and inject it into the service for consistent, configurable http requests.
POST Request - Part 13:13
POST Request - Part 25:13
PUT Request - Part 12:14
PUT Request - Part 24:48
PATCH Request - Part 11:07
Explore how to use Angular HTTP patch to update only the changed fields by resource id, leaving other data intact, unlike put which requires the full payload.
PATCH Request - Part 23:42
Learn to use patch requests for partial updates in angular http communication, sending only the properties to change (name, email, username) via the user id.
DELETE Request - Part 14:09
DELETE Request - Part 24:09
Implement a delete request for a user by ID, handle void responses, log results, and verify a 200 OK with an empty body.

HTTP Headers - Part 14:09
Learn how http headers let the client and server exchange information during requests and responses in Angular, including content-type, authorization, and the HttpHeaders class for setting, appending, and deleting headers.
HTTP Headers - Part 28:47
HTTP Parameters - Part 11:57
HTTP Parameters - Part 28:50
HTTP Events3:03
HTTP Request Progress - Part 110:01
HTTP Request Progress - Part 25:55
HTTP Request Progress - Part 39:23
Request Text Data8:32

Introduction2:23
Reactive Programming5:13
RxJS - Reactive Extensions for JavaScript3:01
Tap Operator3:28
Map Operator - Part 16:43
Learn how to use the map operator in Angular HTTP to transform API data on the client, such as uppercasing user names before presenting them in the user interface.
Map Operator - Part 24:54
Use the map operator to transform incoming data by adding derived attributes like is admin and user id, and reshape objects to include only email, id, and website.
Map Operator - Part 34:18
Set a default user image using robo hash, add an optional image attribute, and lowercase the user name to fetch and display a random robot image in the UI.
Map Operator - Part 43:42
Retry Operator4:06
Explore the retry operator in Angular HTTP communication, retrying up to three times before failing, and learn how observables, pipe, and share replay caching help avoid backend flooding.

Requirements

Basic Web Knowledge (HTML, CSS)
Basic JavaScript Knowledge
Basic Angular Knowledge

Description

HTTP is the primary protocol for browser and server communication. The Angular HTTP library simplifies application programming with the XHR and JSONP APIs. Almost all Angular applications need to make HTTP requests to a back-end web API to retrieve, save, update, and delete data. This course teaches basic, as well as advanced features of Angular HTTP.

This course also covers an introduction to the new HTTP client module, example of an HTTP GET, improved Type Safety, HTTP Request Parameters (Immutability-based API), HTTP Headers (Immutability-based API), HTTP PUT, PATCH, POST, DELETE, some REST Guidelines (specific to RESTful JSON) for using the multiple HTTP methods, and much more. It also goes over the major features of the HTTP client service provided by angular such as the ability to request typed response objects, streamlined error handling, request and response interception.

In addition, it teaches how to use RxJS, and the RxJS operators that are most common when working with the Angular HTTP client. A significant part of this course is dedicated to teaching how to work with another new use case that is supported by the HTTP client; Progress HTTP Events.

The new Angular HTTP Client is a great evolution when compared to the previous HTTP client in the front-end world of wed development. It's more user-friendly and helps to improve the type safety of our code.

Who this course is for:

Student wanting to learn basics, as well as advanced features of Angular HTTP communication

Angular HTTP Communication

What you'll learn

Explore related topics

Course content

Introduction9 lectures • 18min

Consuming RESTful Web Services22 lectures • 1hr 11min

HTTP Request Metadata9 lectures • 1hr 1min

RxJS9 lectures • 38min

Error Handling5 lectures • 16min

Angular HTTP Interceptors4 lectures • 17min

Requirements

Description

Who this course is for: