Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Personal Transformation Life Purpose Meditation Coaching Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ Unreal Engine Blueprints 2D Game Development Blender
30-Day Money-Back Guarantee

This course includes:

  • 5.5 hours on-demand video
  • 2 articles
  • Full lifetime access
  • Access on mobile and TV
Development Web Development RxJs

Reactive Angular Course (with RxJs)

Build Angular 11 Applications in Reactive style with plain RxJs - Patterns, Anti-Patterns, Lightweight State Management
Highest Rated
Rating: 4.6 out of 54.6 (2,189 ratings)
11,260 students
Created by Angular University
Last updated 1/2021
English
English [Auto], Portuguese [Auto], 
30-Day Money-Back Guarantee

What you'll 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
Curated for the Udemy for Business collection

Course content

7 sections • 41 lectures • 5h 34m total length

  • Preview07:31
  • IMPORTANT: Recommended Software Versions
    00:18
  • Preview08:06

  • Preview08:56
  • Preview05:19
  • Preview09:02
  • Consuming Observable-based services using the Angular async Pipe
    12:18
  • Avoiding Angular duplicate HTTP requests with the RxJs shareReplay operator
    08:38
  • Angular view Layer Patterns - Smart vs Presentational Components
    10:13
  • Data Modification Example in Reactive Style (Stateless Application)
    13:49

  • Reactive Component Interaction - Section Introduction
    04:26
  • Decoupled component communication using a shared Service
    07:49
  • Loading Service Reactive API Design
    07:07
  • Reactive Component Interaction using Custom Observables and Behavior Subject
    12:22
  • Loading Indication Service - Reactive Implementation Finished
    08:28
  • Understanding the Angular Component providers property
    13:25
  • Error Handling and the Messages Component
    05:10
  • Error Handling with the catchError RxJs operator
    07:20
  • Messages Service - Implementation Finished and Demo
    12:12
  • Local Error Handling in an Angular Material Dialog
    10:29
  • Angular State Management - When is it Needed and Why?
    07:30
  • Initial Implementation of a Store Service
    09:05
  • Step-by-Step Implementation of an Angular Store Service
    11:30
  • Store Optimistic Data Modification Operations - API Design
    07:52
  • Store Optimistic Data Modifications - Step-By-Step Implementation
    13:58

  • Authentication State Management - Section Introduction
    05:49
  • Authentication Store - Step-By-Step Implementation
    07:30
  • Adapting the UI according to the user Authentication status
    08:25
  • Authentication Store - Browser Refresh support with Local Storage
    08:43

  • Master-Detail UI Pattern - Section Introduction
    04:48
  • Angular Master Detail Implementation - The Master Table
    08:01
  • Angular Master Detail Implementation - The Detail Element
    04:17
  • Angular Master Detail Implementation - Final Demo
    08:04

  • Consolidation Exercise - Implementing the Course Screen in Reactive Style
    06:55
  • Course Component Finished - Introduction to the Single Data Observable Pattern
    04:37
  • Reactive Angular - The Single Data Observable Pattern
    10:47
  • Single Data Observable Pattern - Default Data Values
    08:17
  • Refactoring an Angular Reactive Application to OnPush Change Detection
    07:28

  • Other Courses
    02:17
  • Bonus Lecture: Learn More About The Angular University And My YouTube Channel
    01:28
  • Conclusion & Key Takeaways
    14:37

Requirements

  • Angular (beginner level)
  • Typescript
  • Some basics of RxJs

Description

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 approach. 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.

Who this course is for:

  • 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)

Featured review

Sanjay Rawal
Sanjay Rawal
30 courses
5 reviews
Rating: 5.0 out of 56 months ago
The course did enhance my knowledge of using observables through rxjs library and how to use them effectively. Overall a good course to go through if you're an experienced angular developer who wants to improve their existing knowledge of rxjs.

Instructor

Angular University
Best Selling Angular Courses | 95,000+ students | 16 courses
Angular University
  • 4.5 Instructor Rating
  • 15,137 Reviews
  • 100,093 Students
  • 17 Courses

About the Angular University:

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

No matter if you are a beginner, intermediate or advanced in Angular, we have several courses for you.

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 throughout the years.   

I worked on a ton of projects, everything from single page applications to help build the European Criminal Record Information Exchange System, to brand new e-banking portals, to corporate banking portals, and more. I've been a key part of internal framework teams that built frameworks for in-house departments of tens of developers.

I also love to teach, write and talk about technology.  I am looking forward to be your Angular instructor,

Kind Regards,

Vasco

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.