book

Modern Angular

Name: Modern Angular
Author: Armen Vardanyan
ISBN: 9781633436923

by Armen Vardanyan

January 2025

Intermediate to advanced

304 pages

9h 22m

English

Manning Publications

Read now

Unlock full access

Modern Angular
copyright
dedication
contents
preface
acknowledgments
about this book
Who should read this bookHow this book is organized: A road mapAbout the codeliveBook discussion forum
about the author
about the cover illustration
1 Welcome to modern Angular
1.1 What to expect1.1.1 Who will benefit from reading this book?1.1.2 What do we need to know before getting started?1.1.3 How is the book structured?1.2 How Angular was1.2.1 Angular’s core features1.2.2 What is an Angular application?1.3 Let’s start a modern Angular app1.3.1 Using the Angular CLI1.3.2 Creating a new project1.3.3 What changed?1.4 What’s new in Angular?1.4.1 How does Angular evolve?1.4.2 How does Angular recognize problems?1.4.3 Current goals1.4.4 New features1.4.5 What about the future?1.4.6 The learning processSummary

2 A standalone future
2.1 Why abandon NgModules?2.1.1 Hard to learn, hard to explain2.1.2 Indirectness and boilerplate2.1.3 Other concerns with NgModules2.2 Previous solutions2.2.1 Hierarchic shared modules2.2.2 Enter SCAMs2.3 Developing apps without NgModules2.3.1 Creating our first standalone component2.3.2 Routing standalone components and providing dependencies2.4 Lazy-loading components2.4.1 Lazy-loading with NgModules2.4.2 Lazy-loading a single standalone component2.4.3 Lazy-loading several standalone components2.4.4 Providing dependencies only to certain routes2.4.5 Lazy-loading a component into another component2.5 Migrations and common pitfalls2.5.1 Migrating by hand2.5.2 Using SCAMs2.5.3 Migrating with a schematic command2.5.4 Handling circular dependencies2.6 Exercises for the readerSummary
3 Revitalized dependency injection
3.1 How does dependency injection work?3.1.1 Why do we need DI?3.1.2 Let’s build a primitive DI mechanism3.1.3 Dependency injection the Angular way3.1.4 Injection contexts3.2 The inject function3.2.1 Another way of injecting dependencies3.2.2 Injecting dependencies outside classes3.2.3 Why we should always use inject3.2.4 What about the drawbacks?3.3 Functional guards, resolvers, and interceptors3.3.1 Building an AuthGuard3.3.2 Building an EmployeeResolver3.3.3 Adding tokens to HTTP requests3.3.4 Migrating to functional guards/resolvers/interceptors3.4 DI deep dive3.4.1 DI lookup and how to modify it3.4.2 Truncating text with DI3.5 Exercises for the readerSummary
4 New capabilities of Angular building blocks
4.1 Powerful inputs4.1.1 Required inputs4.1.2 Transforming input values4.1.3 Binding routing parameters to input properties4.1.4 Inputs for dynamic components4.2 Host directives4.2.1 Extending existing directives4.2.2 Using multiple directives and adding inputs4.2.3 Things to know when using host directives4.3 Type-safe reactive forms4.3.1 Downsides of using untyped forms4.3.2 Introducing type-safe forms4.3.3 Common pitfalls when working with type-safe forms4.3.4 Migrating to type-safe forms4.3.5 Form events4.4 NgOptimizedImage4.4.1 Adding lazy loading and remembering to set width/height4.4.2 Prioritizing image loading4.4.3 Srcsets and image loaders4.5 Other improvements4.5.1 Self-closing component tags4.5.2 Fetch-based HttpClient4.5.3 Support for default export components in routing4.5.4 Improved error messages4.6 Exercises for the readerSummary
5 RxJS in modern Angular
5.1 What is reactive programming?5.2 Why we (still) need RxJS5.3 Unsubscribing from observables5.3.1 Why unsubscribe?5.3.2 Problems with unsubscribing5.3.3 Introducing DestroyRef5.3.4 The takeUntilDestroyed operator5.4 Writing our own custom RxJS operators5.4.1 What is an RxJS operator?5.4.2 How do operators work?5.4.3 Building custom operators5.5 Exercises for the readerSummary
6 Signals: A new approach to reactive programming
6.1 Why go beyond RxJS?6.1.1 What are the problems with RxJS?6.1.2 What must the solution look like?6.2 What is a signal?6.2.1 Creating signals6.2.2 Updating signals6.2.3 Creating signals vs. observables6.3 Building Angular components with signals6.3.1 Creating TimeOffComponent6.3.2 Handling signals in Angular components6.4 Computed signals6.4.1 Creating computed signals6.4.2 Simplifying complex logic in Angular components using computed signals6.5 Effects6.5.1 Creating effects6.5.2 Important things to know about effects6.5.3 When to use effects6.6 RxJS and signals interoperability6.6.1 Converting observables to signals6.6.2 Converting signals to observables6.7 Exercises for the readerSummary
7 Signals: A deep dive
7.1 Advanced options when dealing with signals7.1.1 Signal equality7.1.2 Untracking dependencies7.1.3 Manual cleanup7.1.4 Readonly signals and synchronizing with RxJS7.2 Signals under the hood7.2.1 The nature of signals7.2.2 How changes to signals propagate7.3 State management with signals7.3.1 State management: The task7.3.2 State management: The implementation7.3.3 State management: The problems7.3.4 Advanced interoperability with RxJS7.4 Migrating to signals7.4.1 Migrating RxJS-heavy Angular applications7.4.2 Migrating more traditional Angular applications7.5 The future of signals7.5.1 Signal-based components7.5.2 Signal inputs and outputs7.5.3 Everything else7.6 Exercises for the readerSummary
8 Unit testing in modern Angular
8.1 Unit testing: The what and the why8.1.1 Prerequisites8.1.2 What is a unit test?8.1.3 Why do we want unit tests?8.2 Configuring a testing environment8.2.1 Choosing a test runner8.2.2 Setting up the test runner8.2.3 Installing third-party tools8.3 Running Angular unit tests8.3.1 What do unit tests look like?8.3.2 Providing mock dependencies8.3.3 Testing components8.3.4 Testing services8.3.5 Testing signals8.4 Powers of AI with Angular unit tests8.4.1 Unit testing Angular applications with ChatGPT8.4.2 Unit testing Angular applications with GitHub Copilot8.5 The future of unit testing in Angular8.6 Exercises for the readerSummary
9 Modern Angular everywhere
9.1 What is server-side rendering?9.1.1 SSR: The what9.1.2 SSR: The why9.1.3 SSR: The how9.2 Building Angular apps with SSR from scratch9.2.1 How is an SSR Angular application different from a SPA?9.2.2 Running an SSR Angular application9.2.3 Building components in an SSR Angular application9.3 Improving Angular SSR9.3.1 HTTP caching9.3.2 Client-side hydration9.3.3 Prerendering9.4 Building an Angular application9.4.1 What does building an Angular application mean?9.4.2 ESBuild and Vite9.4.3 Configuring environments for Angular applications9.4.4 Preparing to deploy Angular applications9.5 Exercises for the readerSummary
10 What’s next in modern Angular?
10.1 New template syntax10.1.1 Goodbye ngIf!10.1.2 Hello @for!10.1.3 @switch10.1.4 Migrating to the new template syntax10.2 Deferrable views10.2.1 Deferring a simple component10.2.2 Deferring depending on a condition or trigger10.2.3 Customizing deferred loading10.3 Zoneless Angular applications10.3.1 How change detection works in Angular10.3.2 Why change detection in Angular needs to improve10.3.3 ChangeDetectionStrategy.OnPush10.3.4 Introducing granular change detection10.3.5 Zoneless scheduler for change detection10.4 In other newsSummary
index

Content preview from Modern Angular

5 RxJS in modern Angular

This chapter covers

Reactive programming principles
Using RxJS to build functionality that uses reactive programming
Unsubscribing from observables in a new way
Using dependency injection in custom RxJS operators

So far in this book, we have built many features using the different tools that Angular provides. We have already interacted with RxJS several times, mainly when making HTTP calls and handling them in interceptors. However, we can safely say that this is only a tiny part of all the capabilities that RxJS can give us when we are developing frontend applications. In this chapter, we are going to learn about reactive programming and explore RxJS, the first-choice tool for working in this paradigm, its complex ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Angular - The Complete Guide [2024 Edition]

Publisher Resources

ISBN: 9781633436923Publisher Support Publisher Website

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

Modern Angular

by Armen Vardanyan