Angular HTTP Communication

Nearly every Angular app needs to communicate with a server over HTTP. This course will teach you simple, as well as advanced, techniques to help you create and manage HTTP requests, responses as Observables, interceptors, and client-side caches.
Course info
Rating
(94)
Level
Intermediate
Updated
Mar 9, 2018
Duration
2h 27m
Table of contents
Description
Course info
Rating
(94)
Level
Intermediate
Updated
Mar 9, 2018
Duration
2h 27m
Description

Nothing is more fundamental to a web application than the HTTP protocol. In Angular HTTP Communication, you will learn sophisticated techniques to help you take full advantage of the HTTP client features built-in to Angular. First, you will explore how to communicate with a REST service. Next, you will discover how to modify HTTP requests and responses with interceptors and create a client-side cache. Finally, you will create unit tests to make sure your HTTP requests always do what you expect. When you're finished with this course, you will have an advanced understanding of the HTTP features included with Angular and the practical skills required to build well-structured, performance-oriented Angular applications that take full advantage of Angular's HTTP client.

About the author
About the author

Brice has been a professional developer for over 20 years and loves to experiment with new tools and technologies. Web development and native iOS apps currently occupy most of his time.

More from the author
RxJS: Getting Started
Intermediate
3h 4m
Sep 27, 2018
Web Development: Executive Briefing
Beginner
30m
Jul 31, 2018
More courses by Brice Wilson
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hey everybody. My name is Brice Wilson, and welcome to my course, Angular HTTP Communication. I'm a server and client-side web developer. Angular is a wildly-popular client-side web framework and for lots of good reasons. It helps you quickly build well-structured, maintainable, and performance-oriented web applications. In this course, we're going to cover both basic and advanced HTTP features available in Angular that help you successfully communicate with your server, and efficiently retrieve and manage data in your applications. Some of the major topics that we'll cover include consuming REST services, retrieving data with resolvers, creating interceptors, caching data in your apps, and unit testing your HTTP requests. By the end of the course, you'll know how to use all the major features in Angular's HTTP client to retrieve and update data, but also manage that data on the client efficiently, so that your app provides a great experience for your users. Before beginning this course, you should be familiar with the basics of Angular and TypeScript, but you certainly don't need to be an expert. I hope you'll join me on this journey to learn about Angular's HTTP client with the Angular HTTP Communication course at Pluralsight.

Consuming REST Services
In this module, we're going to tackle one of the most common tasks you'll probably perform in your Angular apps, Consuming a REST Service. Most modern client applications require data, and REST services are the most popular way of delivering that data. Don't worry if you're unfamiliar with what makes a service a REST service, I'll quickly cover that in the next clip. After that, I'll show you how to consume a REST service using Angular's HttpClient and observables. Along the way, we'll take a brief detour, and I'll show you a couple of powerful techniques for manipulating data using RxJS operators. There are lots of demos and lots of code to write, so let's get started.

Advanced HTTP Requests and Error Handling
In this module, I'm going to build on the code from the last module, and show you how handle the inevitable errors you'll receive when retrieving data over HTTP. I'll also show you how to use a feature of Angular's router to prefetch data for your components before activating the new route. It's easy to build demo apps that are always fast and never do anything unexpected, but we all know this is not how software behaves in the real world. Any app you build that you plan to distribute to actual users needs to properly handle errors. I'm going to show you how to handle HTTP errors in your Angular app, and go one step further and show you how to abstract those HTTP details away from your components, and return custom errors. I'll then show you how to use resolvers to make sure a component has all of the data it needs before activating a new route. Let's start with the error handling.

Creating Interceptors
Welcome back. In this module, I'm going to cover one of my favorite HTTP features in Angular, interceptors. I think the reason I like them so much is that they allow you to write a small bit of code, configure it in a single place, and then have it applied to all of your HTTP requests and responses. I'm naturally kind of lazy, so anything that lets me do so much work with so little effort is instantly appealing. I'll first cover exactly what interceptors are, and how they fit with the HTTP communication techniques we've already seen. I'll then cover when they're useful and how to create them before adding a couple of them to the BookTracker app. Also note, this is just the first of two modules on interceptors. I'll cover the basics in this module, and in the next module, I'll show you how to cache HTTP requests in your app using interceptors. Let's get started.

Caching HTTP Requests with Interceptors
In this module, we're going to build on the interceptor fundamentals I covered in the last module, and use them to implement client-side caching. In the last module, I explained to you what Angular interceptors are and how to implement them in your apps. I showed you a couple of useful, but admittedly simple cases when you might use them. In this module, I'm going to show you how to combine your understanding of Angular services and the interceptors to implement application-specific caching that can really improve the performance of your apps. There's no new syntax to learn in this module, so I'll primarily focus on how to put the pieces together that you already understand to form a useful solution.

Testing HTTP Requests
In this final module of the course, I'm going to show you how to get started writing unit tests for the HTTP requests in your apps. I think it's pretty well accepted these days that writing unit tests increase the quality of your code, and that their benefits are well worth the extra development time they require. The Angular team obviously feels the same way, because they've built special testing tools not just for HTTP requests, but for the entire framework. They've also made sure that new Angular apps created with the Angular CLI already have all of the external testing tools you need installed, so that you can easily write tests right from the very beginning. I'm not going to cover all of the ins and outs of unit testing in general or even Angular unit testing, but I will show you how to get started writing very useful unit tests for your HTTP requests that will hopefully help you identify problems in your code before you get a late-night phone call reporting the problem in production.