Code Splitting and Deferrable Views | Angular - The Complete Guide [2024 Edition]

Book Overview & Buying
Table Of Contents
Feedback & Rating

Angular - The Complete Guide [2024 Edition]

By : Maximilian Schwarzmüller

Buy this Video

Angular - The Complete Guide [2024 Edition]

By: Maximilian Schwarzmüller

Buy this Video

Overview of this book

This Angular course, built specifically for web development professionals looking to harness the full potential of Angular 18, the latest and most advanced version of this powerful framework. This up-to-date course starts with an introduction to Angular’s evolution, highlighting its stability, new features, and what makes it a top choice for modern web development. You’ll set up your development environment and build your first Angular 18 project, laying the groundwork for complex and scalable applications. Dive deep into the core concepts of Angular, including components, templates, and services, all updated to reflect the latest Angular 18 practices. You’ll master creating and managing components with Angular CLI, output dynamic content, and grasp Angular’s improved change detection mechanism. Advanced topics like module-based app structures, dependency injection, Angular services, and state management using NgRx are also covered comprehensively, ensuring you stay ahead in the rapidly evolving web development landscape. Throughout the course, you'll learn to create reusable components, manage forms, debug efficiently, and optimize applications for maximum performance. With a step-by-step approach, each module builds on the last, delivering a seamless learning experience tailored to Angular 18's enhanced capabilities.

Getting Started

Welcome To The Course!

What Exactly Is Angular?

Why Would You Use Angular?

Angular's Evolution and Stability

Creating A New Angular Project

Setting Up An Angular Development Environment

About This Course

Angular Essentials - Components, Templates, Services and More

Module Introduction

A New Starting Project and Analyzing The Project Structure

Understanding Components and How Content Ends Up On The Screen

Creating a First Custom Component

Configuring the Custom Component

Using the Custom Component

Styling the Header Component and Adding An Image

Managing and Creating Components with the Angular CLI

Styling and Using Our Next Custom Component

Preparing User Data (To Output Dynamic Content)

Storing Data in a Component Class

Outputting Dynamic Content with String Interpolation

Property Binding and Outputting Computed Values

Using Getters For Computed Values

Listening to Events with Event Binding

Managing State and Changing Data

A Look Behind The Scenes Of Angular's Change Detection Mechanism

Introducing Signals

We Need More Flexible Components!

Defining Component Inputs

Required and Optional Inputs

Using Signal Inputs

We Need Custom Events!

Working with Outputs and Emitting Data

Using the output() Function

Adding Extra Type Information To EventEmitter

Exercise: Create a Configurable Component

TypeScript: Working With Potentially Undefined Values and Union Types

Accepting Objects As Inputs and Adding Appropriate Typings

TypeScript: Type Aliases and Interfaces

Outputting List Content

Outputting Conditional Content

Legacy Angular: Using ngFor and ngIf

Adding More Components to the Demo App

Outputting User-specific Tasks

Outputting Task Data in the Task Component

Storing Data Models in Separate Files

Dynamic CSS Styling with Class Bindings

More Component Communication: Deleting Tasks

Creating and Conditionally Rendering Another Component

Managing The "New Task" Dialog

Using Directives and Two-Way-Binding

Signals and Two-Way-Binding

Handling Form Submission

Using the Submitted Data

Content Projection with ng-content

Transforming Template Data with Pipes

Getting Started with Services

Getting Started with Dependency Injection

More Service Usage and Alternative Dependency Injection Mechanism

Time to Practice: Services

Using localStorage for Data Storage

Module Summary

Angular Essentials - Working with Modules

Module Introduction

A First Introduction To Angular Modules (NgModule)

Creating a First Empty Module

Bootstrapping Apps with Angular Modules

Declaring and Using Components

A First Summary

Migrating All Components To Use Modules

Creating and Using Shared Modules

Creating More Complex Module-based App Structures

Angular Essentials - Time To Practice

Module Introduction and Starting Project

Adding a Header Component With An Image

Adding a User Input Component

Handling Form Submission

Extracting Values with Two-Way-Binding

Calculating the Annual Investment Data

Cross-Component Communication with Outputs

Creating and Using a Data Model

Passing Data from Parent to Child with Inputs

Outputting Data in a Table

Formatting Output with a Pipe

Using Signals and Resetting The Form After Submission

Using a Service for Cross-Component Communication

Using Signals in Services

Migrating to Angular Modules

Module Summary

Debugging Angular Apps

Module Introduction

Understanding Error Messages and Fixing Errors

Debugging Logical Errors with the Browser DevTools and Breakpoints

Exploring the Angular DevTools

Components and Templates - Deep Dive

Module Introduction

Starting Project and An Opportunity For Smaller Components?

When and How To Split Up Components

Splitting A Component Into Multiple Components

Creating Reusable Components

Component Inputs: Repetition

Property Binding: Repetition

Using Content Projection and ng-content

Adding Forms to Components

A Possible, But Not Ideal Way Of Extending Built-in Elements

Extending Built-in Elements with Custom Components via Attribute Selectors

Supporting Content Projection with Multiple Slots

Exploring Advanced Content Projection

Defining Content Projection Fallbacks

Multi-Element Custom Components and Content Projection

Scoping CSS Styles to Components

Understanding and Configuring View Encapsulation

Making Sense of Component Host Elements

Using Host Elements Like Regular Elements

Interacting With Host Elements From Inside Components

When (Not) To Rely On Host Elements

Interacting with Host Elements via @HostListener and @HostBinding

Accessing Host Elements Programmatically

Class Bindings: Repetition

There's More Than One Way Of Binding CSS Classes Dynamically

A Closer Look At Dynamic Inline Style Binding

Manipulating State and Using Literal Values

Introducing the Component Lifecycle: ngOnInit

Implementing Lifecycle Interfaces

Component Lifecycle - A Deep Dive

Component Cleanup with ngOnDestroy

Component Cleanup with DestroyRef

Handling Form Submissions: Repetition

Working with Template Variables

Extracting Input Values via Template Variables

Template Variables and Component Instances

Getting Access to Template Elements via ViewChild

Using The viewChild Signal Function

ViewChild vs ContentChild

A Closer Look at Decorator-based Queries and Lifecycle Hooks

The afterRender and afterNextRender Lifecycle Functions

Making Sense of Signal Effects

TypeScript and Type Models: Repetition

Component Outputs: Repetition

A Closer Look At Template For Loops

Revisiting Inputs and Signals

Updating Signal Values

Cross-Component Communication and State Management

Configuring Component Inputs and Outputs

Two-Way Binding: Repetition

Setting Up Custom Two-Way Binding

An Easier Way of Setting Up Custom Two-Way Binding

Enhancing Elements with Directives - Deep Dive

Module Introduction

Understanding Directives

The Starting Project

Analyzing a Built-in Attribute Directive: ngModel

Analyzing a Built-in Structural Directive: ngIf

Getting Started with Custom Directives

Using Attribute Directives To Change Element Behavior

Working with Inputs in Custom Directives

Directives and Dependency Injection

Building Another Directive

Building a Custom Structural Directive

Structural Directives and Syntactic Sugar

Host Directives and Composition

Transforming Values with Pipes - Deep Dive

Module Introduction

Making Sense of Pipes

Using Built-in Pipes

More Built-in Pipes Examples

Building a First Custom Pipe

Using Custom Pipes to Perform Custom Transformations

Accepting Parameters in Custom Pipes

Chaining Pipes and Being Aware of Limitations

Building a Pipe That Sorts Items

Understanding How Pipes Are Executed

Pure and Impure Pipes

Pipe Limitations and When Not To Use Them

Understanding Services and Dependency Injection - Deep Dive

Module Introduction

The Starting Project and The Need For A Centralized Service

Creating a Service

How NOT To Provide A Service

Using Angular's Dependency Injection Mechanism

Using The Alternative Dependency Injection Syntax

Outsourcing and Reusing Logic with Services

Angular Has Multiple Injectors!

There Are Multiple Ways Of Providing a Service

Providing Services via the Element Injector

Understanding the Element Injector's Behavior

Injecting Services Into Services

Analyzing Dependency Injection with the Angular DevTools

Using Custom DI Tokens and Providers

Preparing A Non-Class Value For Injection

Injecting Other Values (NOT Services)

Angular Modules (NgModule) and Dependency Injection

Working with Services Without Using Signals

Making Sense of Change Detection - Deep Dive

Module Introduction

Analyzing the Starting Project

Understanding How Angular Performs Change Detection

Change Detection During Development: ExpressionChangedAfterChecked Errors

Writing Efficient Template Bindings

Avoiding Zone Pollution

Using the OnPush Strategy

Understanding the OnPush Strategy

Working with OnPush and Signals

Using Signals for Sharing Data Across Components (with OnPush)

The Problem With OnPush, Cross-Component Data and Not Using Signals

Triggering Change Detection Manually and Using RxJS Subjects

Introducing The async Pipe

Going Zoneless!

Working with RxJS (Observables) - Deep Dive

Module Introduction

What Are Observables and What Is RxJS?

Creating and Using an Observable

Working with RxJS Operators

Working with Signals

Signals vs Observables

Converting Signals To Observables

Converting Observables To Signals

Deep Dive: Creating and Using A Custom Observable From Scratch

Module Summary

Sending HTTP Requests and Handling Responses

Module Introduction

The Starting Projects: Frontend and Backend

How To Connect Angular Apps To A Backend

Getting Started with Angular's Http Client

Sending a GET Request To Fetch Data

Configuring Http Requests

Transforming and Using Response Data

Showing a Loading Fallback

Handling HTTP Errors

Sending Data To A Backend

More Data Fetching and Some Code Duplication

Outsourcing HTTP Request Logic Into A Service

Managing HTTP-loaded Data via a Service

Implementing Optimistic Updating

Potential Problems Introduced by Optimistic Updating

Improved Optimistic Updating

Implementing App-wide Error Management

Practice: Sending DELETE Requests

Introducing HTTP Interceptors

Introducing HTTP Response Interceptors

Handling User Input and Working with Forms (Template-driven and Reactive)

Module Introduction

Template-driven vs Reactive Forms

Template-driven: Registering Form Controls

Getting Access to the Angular-managed Form

Extracting User Input Values

Validating Input with Form Validation Directives

Using the Form Validation Status To Provide User Feedback

Adding Validation Styles

Interacting With The Underlying Form Object In The Component

Updating Form Values Programmatically

Reactive Forms: Getting Started

Syncing Reactive Form Definition and Template

Handling Form Submission (Reactive Forms)

Adding Validators To Reactive Forms

Building Custom Validators

Creating and Using Async Validators

Interacting with the Form Programmatically

Exercise: Problem

Exercise: Solution

Connecting and Registering Inputs For A Complex Form

Working with Nested Form Groups

Working with Form Arrays

Practice: Adding More Validation

Creating Multi-Input Validators / Form Group Validators

Module Summary

Routing and Building Multi-page Single Page Applications

Module Introduction

What Is Routing?

Enabling Routing and Adding a First Route

Rendering Routes

Registering Multiple Routes

Adding Links The Right Way

Styling Active Navigation Links

Setting Up and Navigating To Dynamic Routes

Extracting Dynamic Route Parameters via Inputs

Extracting Dynamic Route Parameters via Observables

Working with Nested Routes

Route Links and Relative Links

Accessing Parent Route Data From Inside Nested Routes

Loading Data Based On Route Parameters In Child Routes

Link Shortcuts and Programmatic Navigation

Adding A "Not Found" Route

Redirecting Users

Splitting Route Definitions Across Multiple Files

Activated Route vs Activated Route Snapshot

Setting Query Parameters

Extracting Query Parameters via Inputs

Extracting Query Parameters via Observables

Using Query Parameters For Data Manipulation

Adding Static Data To Routes

Resolving Route-related Dynamic Data

Accessing Route Data In Components

Controlling Route Resolver Execution

Setting and Resolving Titles

Introducing Route Guards

Making Sense of The CanDeactivate Guard

Improving The CanDeactivate Logic

Reloading Pages via the Angular Router and Configuring Programmatic Navigation

Code Splitting and Deferrable Views

Module Introduction

What Is Lazy Loading / Code Splitting?

Introducing Route-based Lazy Loading

Implementing Route-based Lazy Loading

Lazy Loading Entire Route Groups

Using Lazy Loading and Routing to Lazy-load Services

Introducing Deferrable Views

Defer Loading Until Viewport Visibility

Deferrable Views: Using Other Triggers

Prefetching Lazy-loaded Code

Deferrable Views: Summary

Deploying Angular Apps - CSR, SSR, SGA

Module Introduction

Preparing a Project For Deployment: Building It For Production

Building SPAs: Pros and Cons

SPAs: Deployment Example

Using "ng add", "ng deploy" and Angular's Built-in Deployment Support

Server-side Rendering (SSR) Introduction

Setting Up SSR For An Angular App

Building and Service an SSR App

Authoring SSR-ready Code (Beware of Pitfalls!)

SSR and Client-Server Mismatches

Static Site Generation (SSG) Introduction

Configuring and Using SSG

Deployment Methods - A Summary

Course Roundup and Next Steps

Course Roundup

About The Rest Of This Course

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Angular - The Complete Guide [2024 Edition]

By : Maximilian Schwarzmüller

Angular - The Complete Guide [2024 Edition]

By: Maximilian Schwarzmüller

Overview of this book

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access