Angular Signals In Depth (Angular 18)

What you'll learn
Code in Github repository with downloadable ZIP files
Learn how to build modern Angular applications with Signals
Learn Angular Signals in depth, including computed(), effect() and more
Learn RxJs Interoperability with Signals
Learn how to build an Angular application with minimal RxJs today
Learn common UI signal-based patterns
Learn error handling with Signals and signal-based Authentication
Learn the master-detail pattern with Signals, and other commonly used patterns
Requirements
Some Typescript, HTML & CSS
Some basic knowledge of Angular is all that you need
Description
This Course In a NutshellI'm sure that you already heard a lot about Angular Signals, and how they provide you with a completely new way of writing Angular applications!You probably also heard that RxJs is gradually becoming optional in Angular.So the big question in everyone's mind is: what does an Angular application look like if it's written with signals and minimal RxJs?And that is exactly what this course is all about!We are going to build a small application in Angular using signals, and present you with some common design patterns that are you likely going to need almost for sure to build an application in signal style.Course OverviewSo here is how we are going to structure this course: we are going to start by explaining in detail what are signals in Angular, why they are useful, and cover in depth the 3 core primitives: signals, computed signals and effects.Then we are going to use the core signal concepts to build a small Angular application from scratch using the new signal-based component authoring API (we will avoid the old API that is based on decorators).We are going to cover a complete CRUD example using signals and a local backend, and we are going to cover different ways of doing HTTP in Angular using async/await, with and without the Angular HTTP client.We are going to show how to do error handling, and cover how to implement using a signal-based approach common application features such as loading indicators, user messages handling, master-detail scenario, stateful signal-based services, and several other common application features and patterns that you are likely going to need.We will also show how to handle authentication on the frontend using signals and functional guards.And if you need RxJs for certain edge cases, you will also learn about the powerful RxJs interoperability that we have available with signals.Table of ContentsThis course covers the following topics:Deep dive into Angular SignalsAbout signal-based change detectionComputed SignalsEffectsThe new signal-based component API: inputs and outputsComplete CRUD example with signalsHTTP with optional RxJs (two ways of doing it)Error handling and signalsLoading indicators with signalsStateful signal-based servicesHandling user error messages with signalsAngular Authentication with signalsSignal-based view queriesviewChild, viewChildren, contentChild, contentChildrenBi-directional binding with signals and the model() APIMaster-detail scenario with SignalsRxJs InteroperabilityConclusion and final ThoughtsWhat Will You Learn In this Course?In this course you are going to learn in detail how to use signals to build modern Angular applications using the new signal-based component authoring API, async/await and with minimal RxJs.You are going to become familiar with a series of commonly used signal-based application patterns that you are going to need for sure in just about any signal based application that you will ever build.At the end of the course, you will feel very comfortable with the core notions of signals, and you will know how exactly to use signals to build an Angular application from A to Z.Have a look at the course free lessons, and please enjoy the course!
Overview
Section 1: Introduction To Angular Signals
Lecture 1 Modern Angular With Signals - Introduction
Lecture 2 IMPORTANT - Recommended Software Versions
Lecture 3 Setting Up Your Development Environment
Lecture 4 Writing Your First Angular Signal
Lecture 5 Why Angular Signals? Main Benefits
Lecture 6 The Current State of Signal-Based Change Detection
Lecture 7 The Angular signals update API and Read-Only Signals
Lecture 8 Angular Signals and Immutability - Objects
Lecture 9 Angular Signals and Immutability - Arrays
Lecture 10 Angular Computed Signals - Everything You Need To Know
Lecture 11 Angular Signal Effects - Everything You Need To Know
Lecture 12 Angular Signal Effects - Setting The Injection Context
Lecture 13 Angular Signal Effects - When To Use allowSignalWrites
Lecture 14 Angular Signal Effects - How To Do Manual Effect Cleanup
Section 2: Complete CRUD Example With Angular Signals
Lecture 15 Introduction To The Complete CRUD With Signals Section
Lecture 16 Why Making RxJs Optional In Angular?
Lecture 17 CRUD Read Operation - Defining The API of our Service Layer
Lecture 18 Angular HTTP Service Layers - Two Different Options
Lecture 19 Fetching Data From the Service Layer With Error Handling
Lecture 20 Loading Data With OnInit or afterNextRender
Lecture 21 Angular Service Layers With The HTTP Client and async / await
Lecture 22 Defining Derived Data Declaratively Using computed()
Lecture 23 Angular Signal Inputs - Optional and Required Inputs
Lecture 24 CRUD - Display a List of Courses
Lecture 25 CRUD Service Layer - Fetch Implementation
Lecture 26 CRUD Service Layer with async / await and the Angular HTTP Client
Lecture 27 CRUD Update - Opening the Edit Course Dialog
Lecture 28 CRUD Update Edit Course Form
Lecture 29 CRUD Update - Triggering the HTTP PUT Call
Lecture 30 CRUD Update - Updating the UI
Lecture 31 CRUD Delete - Full Implementation
Lecture 32 CRUD Create Course Implementation
Section 3: Angular Signal-Based Loading Indicator
Lecture 33 New Section - Signal-Based Angular Loading Indicator
Lecture 34 Signal-Based Loading Indicator - Shared Signal Service
Lecture 35 Loading Indicator HTTP Interceptor
Lecture 36 Skipping The Loading Indicator Using an HTTP Context
Section 4: Angular Signal-Based User Messages and Error Handling
Lecture 37 Signal-Based User Messages - Shared Service
Lecture 38 Messages Component - Step-by-Step Implementation
Lecture 39 Messages Signal-Based Service Demo
Section 5: Angular Signal-Based Authentication
Lecture 40 Angular Signal-Based Authentication
Lecture 41 Implementing The Login Form
Lecture 42 Authentication Signal-Based Service
Lecture 43 Adapting the UI To The User Authentication Status
Lecture 44 Implementing Logout
Lecture 45 Save User Profile In Local Storage - Survive Refreshes
Lecture 46 Implementing an Authentication Guard With Signals
Section 6: Model Inputs
Lecture 47 Model Inputs
Lecture 48 Model Inputs and Two-Way Data Binding
Lecture 49 Before Continuing- Tiding Up a Couple of Issues
Section 7: Building the View Course Page
Lecture 50 Building the View Course Page
Lecture 51 Implementing the Template of The Course Component
Lecture 52 Implementing The Course Resolver
Lecture 53 Implementing the Lessons Service
Lecture 54 Implementing the Lessons Resolver
Section 8: Master Detail UI Pattern
Lecture 55 Master Detail UI Pattern
Lecture 56 Master Detail - Implement The Search Lessons Form
Lecture 57 Angular Signal Queries - viewChild
Lecture 58 The ViewChildren Signal Query
Lecture 59 Conclusion of the Implementation of the Master Detail Scenario
Lecture 60 Beginning of the Implementation of the Detail Part of Master Detail
Lecture 61 Conclusion of the Implementation of the Master Detail Scenario
Section 9: RxJs Interoperability
Lecture 62 RxJs Interoperability
Lecture 63 Understand toObservable() In Detail
Lecture 64 The toSignal() Interoperability Utility
Lecture 65 toSignal() Configuration Options - requireSync and initialValue
Lecture 66 Understanding toSignal() Error Handling 2
Section 10: Conclusion
Lecture 67 Bonus Lecture June 2024 : These coupons have been recently updated
Lecture 68 Modern Angular With Signals - Conclusion and Key Takeways
Developers looking to learn how to build Angular applications using Signals

Homepage

https://www.udemy.com/course/angular-signals/

Angular Signals In Depth (Angular 18) Fast Download
Angular Signals In Depth (Angular 18) Full Download