CF

Reactive Angular Course (with RxJs)

5h 33m 49s
English
Paid

Unlock the power of Angular by mastering reactive programming with our course, "Reactive Angular Course (with RxJs)." This course is your comprehensive guide to understanding and applying common design patterns and some anti-patterns in Angular development. Designed for developers eager to leverage plain RxJs for crafting responsive applications, this course ensures a practical learning experience with a running GitHub repository containing finished code and starting points for various sections.

Why Learn Reactive Angular?

The course addresses a crucial question for developers: How much can you achieve in Angular using only plain RxJs? Without the need for external state management libraries, the techniques taught here are ideal for a vast range of applications, particularly enterprise-level projects. You'll discover the potent combination of Angular and RxJs in designing and developing both service and view layers, while understanding the merits and challenges of the reactive approach.

These simplified state management techniques are efficient and sufficient for many applications, promoting them as a first-choice solution before considering robust state management libraries like NgRx.

Course Overview

We begin by examining a small Angular application written in imperative style, highlighting some inherent issues. Subsequently, you'll refactor this application, learning step-by-step to adopt a reactive style.

Throughout the course, you'll gain detailed insights into every RxJs operator used. Initially, we'll focus on a purely stateless solution, eventually enhancing the user experience with simple RxJs-only state management techniques, including handling application data and user authentication profiles.

A key feature of lightweight state management is understanding RxJs behavior subjects, which we'll explore in depth. You'll also learn step-by-step solutions for common UI functionalities like loading indicators and error messages in a reactive style.

Table of Contents

  • Imperative Style Review
  • Transition to Stateless Reactive Style
  • Smart vs Presentational Components
  • Stateless Observable Services
  • The shareReplay Operator
  • Stateless UI Updates
  • RxJs Subjects and BehaviorSubject Introduction
  • Decoupled Component Communication
  • Inter-component Communication using Observables
  • Error Handling in Reactive Style
  • Loading Indicators in Reactive Style
  • Enhancing UX with Lightweight RxJs Stores
  • Optimistic UI Updates
  • User Authentication State Management with RxJs
  • Local vs Global Services
  • Master Detail with Cached Master Table
  • Single Data Observable Pattern
  • Refactoring to OnPush Change Detection
  • Conclusion and Key Takeaways

What Will You Learn?

By the end of this course, you'll be proficient in designing and developing Angular applications in reactive style, utilizing plain RxJs techniques. You'll learn how to apply streamlined reactive state management techniques across various use cases, understanding their benefits and limitations.

You'll also gain familiarity with essential reactive design patterns and common pitfalls to avoid.

Requirements

  • Basic knowledge of Angular
  • Proficiency in TypeScript
  • Basic understanding of RxJs

Who Is This Course For?

  • Web developers aiming to learn Reactive Style Angular Applications
  • Angular developers wanting to master lightweight state management techniques using RxJs

Key Takeaways

  • Access to a comprehensive GitHub code repository with downloadable ZIP files
  • Master Lightweight State Management techniques using RxJs only
  • Understand the Core Principles of Reactive Programming
  • Develop Angular applications in Reactive Style with RxJs
  • Learn a catalog of RxJs Application Design Patterns and Anti-Patterns

About the Author: Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 39 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 39 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Reactive Angular Course - Helicopter View
All Course Lessons (39)
#Lesson TitleDurationAccess
1
Reactive Angular Course - Helicopter View Demo
07:32
2
Setting Up your Development Environment
08:07
3
Reviewing a component written in traditional Imperative Style
08:57
4
Understanding potential problems of a program written in Imperative style
05:20
5
Design Pattern - Stateless Observable-based Services
09:03
6
Consuming Observable-based services using the Angular async Pipe
12:19
7
Avoiding Angular duplicate HTTP requests with the RxJs shareReplay operator
08:39
8
Angular view Layer Patterns - Smart vs Presentational Components
10:14
9
Data Modification Example in Reactive Style (Stateless Application)
13:50
10
Reactive Component Interaction - Section Introduction
04:27
11
Decoupled component communication using a shared Service
07:50
12
Loading Service Reactive API Design
07:08
13
Reactive Component Interaction using Custom Observables and Behavior Subject
12:23
14
Loading Indication Service - Reactive Implementation Finished
08:29
15
Understanding the Angular Component providers property
13:26
16
Error Handling and the Messages Component
05:11
17
Error Handling with the catchError RxJs operator
07:21
18
Messages Service - Implementation Finished and Demo
12:13
19
Local Error Handling in an Angular Material Dialog
10:30
20
Angular State Management - When is it Needed and Why?
07:31
21
Initial Implementation of a Store Service
09:06
22
Step-by-Step Implementation of an Angular Store Service
11:31
23
Store Optimistic Data Modification Operations - API Design
07:53
24
Store Optimistic Data Modifications - Step-By-Step Implementation
13:59
25
Authentication State Management - Section Introduction
05:50
26
Authentication Store - Step-By-Step Implementation
07:31
27
Adapting the UI according to the user Authentication status
08:26
28
Authentication Store - Browser Refresh support with Local Storage
08:44
29
Master-Detail UI Pattern - Section Introduction
04:49
30
Angular Master Detail Implementation - The Master Table
08:02
31
Angular Master Detail Implementation - The Detail Element
04:18
32
Angular Master Detail Implementation - Final Demo
08:05
33
Consolidation Exercise - Implementing the Course Screen in Reactive Style
06:56
34
Course Component Finished - Introduction to the Single Data Observable Pattern
04:38
35
Reactive Angular - The Single Data Observable Pattern
10:48
36
Single Data Observable Pattern - Default Data Values
08:18
37
Refactoring an Angular Reactive Application to OnPush Change Detection
07:29
38
Other Courses
02:18
39
Conclusion & Key Takeaways
14:38
Unlock unlimited learning

Get instant access to all 38 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Related courses

Frequently asked questions

What are the prerequisites for taking this course?
Students should have a foundational understanding of Angular and JavaScript before enrolling in this course. Familiarity with basic concepts of reactive programming and RxJs is beneficial but not mandatory, as the course will cover these aspects in detail.
What will I build during the course?
Throughout the course, you will refactor a small Angular application from an imperative to a reactive style. This involves implementing stateless observable-based services, handling component interactions, managing authentication states, and employing master-detail UI patterns.
Who is the target audience for this course?
This course is designed for developers who wish to enhance their Angular applications by mastering reactive programming techniques using RxJs. It is particularly suitable for those interested in developing enterprise-level applications without relying on external state management libraries.
How does this course compare to similar courses?
Unlike some Angular courses that focus heavily on external libraries like NgRx, this course emphasizes achieving similar outcomes using plain RxJs. It provides a comprehensive guide to designing and developing applications through reactive patterns, offering a practical alternative for state management.
What specific tools or platforms does this course cover?
The course focuses on Angular and RxJs, teaching how to use tools like the Angular async Pipe, shareReplay operator, and Behavior Subject for building reactive applications. It also includes error handling techniques using the catchError operator and implementing browser refresh support with local storage.
What topics are not covered in this course?
This course does not delve into external state management libraries such as NgRx. Instead, it emphasizes using plain RxJs for state management. Advanced topics in Angular not directly related to reactive programming, like routing or advanced component styling, are also not covered.
How much time should I expect to commit to this course?
The course consists of 39 lessons, each designed to provide a practical understanding of reactive programming in Angular. While the total runtime is not specified, students should allocate sufficient time for both video lessons and practical exercises to fully grasp the concepts.