Angular 2 RxJs Jumpstart - HTTP and Services Made Simple | Vasco Ferreira | Skillshare

Angular 2 RxJs Jumpstart - HTTP and Services Made Simple

Vasco Ferreira, Web Development Online Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
15 Videos (1h 6m)
    • What is an Observable Introduction to Streams and RxJs Observables

    • Observables Error Handling and Completion How do Observables handle Errors

    • The RxJs Map Operator How to create an Observable from another Observable

    • Observable Composition combine multiple Observables Using combineLatest

    • How does Angular 2 HTTP use Observables The HTTP Response object

    • How to use Observables and HTTP to build a Service Layer

    • Introduction to Functional Reactive Programming Using the Async Pipe

    • Avoid the Biggest Pitfall of Angular 2 HTTP Learn the RxJs Cache Operator

    • How to do multiple HTTP requests using the RxJs Concat Operator

    • How to do two HTTP Requests in Parallel using the RxJs combineLatest Operator

    • How to setup an HTTP request sequence using the RxJs switchMap Operator

    • Retry HTTP requests in Error using the retry and retryWhen RxJs Operators

    • How to Cancel an HTTP Request using an RxJs Subscription

    • Exercise Improve a Search Service and Build a Typeahead

    • 15 Exercise Solution Learn How to build a Typeahead


About This Class

Note: the videos in this course cover Angular 2 Final, and the lessons code is updated to Final

For building the service layer in Angular 2 we have many options available. Should we build a service layer in a similar way to Angular 1, or are there better ways ? How do we use the new HTTP module ? Everything around this module revolves around the notion of Observable. What is an Observable?

The goal of this course is to answer these questions by introducing the fundamentals of RxJs and Functional Reactive Programming and see how these notions apply in practice to the Angular 2 HTTP module. We will learn how to use the HTTP module and Observables to build service layers in Angular 2.

Covering RxJs completely would be the subject or a very large course, but the good news is that if we we are planning to use RxJs mostly to do HTTP calls, then we can focus on only a small subset of operators.

The course structure is simple: we will introduce RxJs and Observables and give a couple of simple examples, and aply it directly by using it to build the service layer of an Angular 2 Application. We will then see how to do the most common HTTP operations that you will do the most often in practice. RxJs does not have to be hard, we can approach it gradually and a great way to jumpstart our understanding of it is to use it in a very concrete case: in the case of this course we will focus on the Angular 2 HTTP Module.


We are going to introduce the notions of Stream and Observable, and explain how these two notions relate to the HTTP module. Then we are going to explain how Observables can be combined to create other Observables and how the HTTP module uses the notion of Observable to handle network calls.

We are going to see how to use the several RxJs operators to do common operations, such as for example: sending a request to the server that depends on a previous request, sending multiple requests in parallel, retrying a request or canceling a request.

Finally we are going to finish the course by using several of the presented RxJs operators to build a Typehead which cancels obsolete requests as the user types.

What you will Learn

After the completion of this course and the exercise you should feel comfortable with the notions of Stream, Observable and Functional Reactive Programming. You should be familiar with several frequently used RxJs operators and know how to use them to implement commonly needed use cases.

You will be comfortable building service layers in Angular 2 using Observables and the HTTP module in general, and will also have a good functional reactive programming foundation that will be helpful in other parts of Angular 2 that also use Observables: for example Forms or Routing.





  • --
  • Beginner
  • Intermediate
  • Advanced
  • All Levels
  • Beg/Int
  • Int/Adv


Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

Vasco Ferreira

Web Development Online Instructor

About the Angular University:

The Angular University aims to be the only place that you need to go in order to learn and keep up with the Angular 2 ecosystem. We provide premium quality video tutorials, screencast style.

About the course instructor:

Hello, my name is Vasco and I'm a Software Developer with 17 years of experience, very seasoned building user interfaces with Angular. I've worked as a Frontend Developer/Architect in a large variety of enterprise projects th...

See full profile

Report class