Reactive Angular Course (with RxJs, Angular 18)

Reactive Angular Course (with RxJs, Angular 18), available at $94.99, has an average rating of 4.56, with 40 lectures, based on 5674 reviews, and has 27868 subscribers.

You will learn about Code in Github repository with downloadable ZIP files per section Learn Lightweight State Management techniques (RxJs only) Understand the Core Principles of Reactive Programming in general Know how to build Applications in Angular in Reactive Style using RxJs Learn a Catalog of RxJs Application Design Patterns and Anti-Patterns This course is ideal for individuals who are Web developers looking to learn how to build Angular Applications in Reactive Style or Angular Developers looking to learn lightweight state management techniques (using RxJs only) It is particularly useful for Web developers looking to learn how to build Angular Applications in Reactive Style or Angular Developers looking to learn lightweight state management techniques (using RxJs only).

Enroll now: Reactive Angular Course (with RxJs, Angular 18)

Summary

Title: Reactive Angular Course (with RxJs, Angular 18)

Price: $94.99

Average Rating: 4.56

Number of Lectures: 40

Number of Published Lectures: 40

Number of Curriculum Items: 40

Number of Published Curriculum Objects: 40

Original Price: $74.99

Quality Status: approved

Status: Live

What You Will Learn

Code in Github repository with downloadable ZIP files per section

Learn Lightweight State Management techniques (RxJs only)

Understand the Core Principles of Reactive Programming in general

Know how to build Applications in Angular in Reactive Style using RxJs

Learn a Catalog of RxJs Application Design Patterns and Anti-Patterns

Who Should Attend

Web developers looking to learn how to build Angular Applications in Reactive Style

Angular Developers looking to learn lightweight state management techniques (using RxJs only)

Target Audiences

Web developers looking to learn how to build Angular Applications in Reactive Style

Angular Developers looking to learn lightweight state management techniques (using RxJs only)

This Course in a Nutshell

This course is a catalog of commonly used design patterns (and some anti-patterns) that every Angular developer should know.

The goal of the course is to teach you how to comfortably design and develop applications in Angular in Reactive style using just plain RxJs, and nothing more.

This course comes with a running Github repository with the the finished code, as well as starting points for different sections of the course in case that you want to code along, which we recommend as its the best way to learn.

This course answers the common question: how far can we go in Angular while using only plain RxJs and nothing more, without introducing any state management library?

It turns out that the simple set of techniques taught in this course are very well suited for a wide range of applications, especially in-house built enterprise applications

In this course, you will learn exactly how to use RxJs to design and develop both the service and the view layers of your application, and you will understand both the advantages and the pitfalls of the reactive approach

Particularly when it comes to state management, it turns out that we can already go very far by leveraging only plain Angular and RxJs techniques, without using an additional state management library like for example NgRx

These simplified state management techniques are adequate and sufficient for a large range of applications,  and we believe that you should consider them first before thinking of adopting a full-blown state management solution

How far can you go with these techniques? That’s what you will find out in this course.

Course Overview

We are going to start our course by taking a small Angular application that is written in imperative style, and we are going to talk about some of the problems of that aproach Then, we are going to refactor the application and explain step-by-step how to implement it in reactive style instead.

We will explain in detail every RxJs operator that we come across in this course, the first time that we need each operator.

We are going to start with a fully stateless solution first, but later we are going to improve the user experience by applying some simple RxJs-only state management techniques We are going to use these patterns in order to handle some of the data of the application, as well as the user authentication profile.

The key element needed to implement lightweight state management is RxJs behavior subjects so we will cover those in detail in the course We will also provide step-by-step reactive style solutions for common UI functionality like loading indicators or error messages.

Table of Contents

This course covers the following topics:

Review of an application written in imperative style

Refactoring into stateless reactive style, understanding the benefits

Smart vs Presentational Components

Stateless Observable Services

The shareReplay Operator

Stateless UI updates (without state management)

Introduction to RxJs Subjects and BehaviorSubject

Decoupled component communication using shared observable services

Using Observables to have components interact at different levels of the component tree

Error Handling and error messages in reactive style

Loading Indicators in reactive style

Improving user experience with lightweight RxJs stores

Optimistic UI updates

Managing User Authentication state with plain RxJs

Local vs Global Services

Master Detail with cached master table in reactive style

The Single Data Observable Pattern: Avoiding nested ng-component tags

Refactoring a reactive application to OnPush change detection

Conclusion and key takeaways

What Will You Learn In this Course?

At the end of the course, you will feel comfortable designing and developing Angular applications in reactive style, by leveraging plain RxJs-only techniques You will know how to apply simplified reactive state management techniques to different common use cases, and you will understand the advantages and the limitations of this approach

You will be familiar with a series of commonly needed reactive design patterns, and you will also be familiar with a series of common pitfalls to avoid

Course Curriculum

Chapter 1: Introduction

Lecture 1: Reactive Angular Course – Helicopter View

Lecture 2: IMPORTANT: Recommended Software Versions

Lecture 3: Setting Up your Development Environment

Chapter 2: Stateless Observables Services

Lecture 1: Reviewing a component written in traditional Imperative Style

Lecture 2: Understanding potential problems of a program written in Imperative style

Lecture 3: Design Pattern – Stateless Observable-based Services

Lecture 4: Consuming Observable-based services using the Angular async Pipe

Lecture 5: Avoiding Angular duplicate HTTP requests with the RxJs shareReplay operator

Lecture 6: Angular view Layer Patterns – Smart vs Presentational Components

Lecture 7: Data Modification Example in Reactive Style (Stateless Application)

Chapter 3: Reactive Component Interaction

Lecture 1: Reactive Component Interaction – Section Introduction

Lecture 2: Decoupled component communication using a shared Service

Lecture 3: Loading Service Reactive API Design

Lecture 4: Reactive Component Interaction using Custom Observables and Behavior Subject

Lecture 5: Loading Indication Service – Reactive Implementation Finished

Lecture 6: Understanding the Angular Component providers property

Lecture 7: Error Handling and the Messages Component

Lecture 8: Error Handling with the catchError RxJs operator

Lecture 9: Messages Service – Implementation Finished and Demo

Lecture 10: Local Error Handling in an Angular Material Dialog

Lecture 11: Angular State Management – When is it Needed and Why?

Lecture 12: Initial Implementation of a Store Service

Lecture 13: Step-by-Step Implementation of an Angular Store Service

Lecture 14: Store Optimistic Data Modification Operations – API Design

Lecture 15: Store Optimistic Data Modifications – Step-By-Step Implementation

Chapter 4: Authentication State Management

Lecture 1: Authentication State Management – Section Introduction

Lecture 2: Authentication Store – Step-By-Step Implementation

Lecture 3: Adapting the UI according to the user Authentication status

Lecture 4: Authentication Store – Browser Refresh support with Local Storage

Chapter 5: Master-Detail UI Pattern (with built-in State Management)

Lecture 1: Master-Detail UI Pattern – Section Introduction

Lecture 2: Angular Master Detail Implementation – The Master Table

Lecture 3: Angular Master Detail Implementation – The Detail Element

Lecture 4: Angular Master Detail Implementation – Final Demo

Chapter 6: The Single Data Observable Pattern

Lecture 1: Consolidation Exercise – Implementing the Course Screen in Reactive Style

Lecture 2: Course Component Finished – Introduction to the Single Data Observable Pattern

Lecture 3: Reactive Angular – The Single Data Observable Pattern

Lecture 4: Single Data Observable Pattern – Default Data Values

Lecture 5: Refactoring an Angular Reactive Application to OnPush Change Detection

Chapter 7: Conclusions and Course Summary

Lecture 1: Bonus Lecture (Updated August 2024)

Lecture 2: Conclusion & Key Takeaways

Instructors

Angular University
Best Selling Angular Courses | 200k+ students | 17 courses

Rating Distribution

1 stars: 70 votes

2 stars: 110 votes

3 stars: 494 votes

4 stars: 1883 votes

5 stars: 3117 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!