book

Modern Angular

by Armen Vardanyan

January 2025

Intermediate to advanced

304 pages

9h 22m

English

Manning Publications

Read now

Unlock full access

Who should read this bookHow this book is organized: A road mapAbout the codeliveBook discussion forum
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.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.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.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.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.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.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.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.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.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

Overview

Discover the new features and techniques of the most modern versions of Angular.

The powerful Angular framework is ever-evolving, with each new iteration bringing amazing new modern features. Modern Angular gets you rapidly up to speed with Angular’s latest innovations.

Inside Modern Angular you’ll learn how to:

Create modern Angular apps with the newest framework capabilities
Setting up and structuring your Angular projects
Implement advanced testing strategies for Angular
Benefit from new improvements in debugging, image loading, and component inputs
Apply state management with reactive programming
Explore signals and server-side rendering
Migrate legacy Angular projects to modern practices
Refactor old Angular patterns using new techniques
Use modern performance optimization approaches to improve User Experience

Discover new ways of working with components, dependency injection, RxJS, Signals, and more—all through building a complete enterprise-grade HR management system! You’ll soon be improving your daily development with Angular’s quality-of-life features, upgrading your app’s performance with server-side rendering, and getting ready for what’s coming Angular’s future. Plus, detailed migration guides demonstrate ways to update existing apps to modern patterns, and make it easy to modernize your legacy code.

About the Technology
Modern web applications have to handle serious challenges, such as complex state management, reactive programming, and SEO. With a host of new features, ecosystem tools, and programming practices, the Angular web framework tackles modern web development head on. If you haven’t tried modern Angular, you’re in for a treat!

About the Book
Modern Angular updates your web development skills to take advantage of new Angular features like signals, server-side rendering, and zoneless change detection. Each chapter explores an exciting capability by adding it hands-on to a full-featured app for managing HR systems. Along the way, you’ll explore dependency injection, RxJS, and standalone components, and pick up techniques for upgrading legacy apps.

What's Inside

Advanced testing strategies
RxJS and custom operators
Performance and search engine optimization
Migrate legacy Angular projects

About the Reader
For experienced Angular developers. Covers Angular versions 12 and later.

About the Author
Armen Vardanyan is a developer, educator, and Google Developer Expert for Angular. He writes articles about Angular, TypeScript, NgRx, and is a panelist for the popular Adventures in Angular podcast.

Quotes
The best and most up-to-date Angular book on the market!
- Lars Gyrup Brink Nielsen, Angular Hero of Education, Co-founder of This is Angular

Sheds light on the essence of what makes Angular great.
- Peter Szabo, AgileWare

The best source you can find today for staying at the forefront of web development.
- Enrique Carro García, GMV Aerospace and Defence

Whether you’re an experienced developer or a newcomer, this book is your ultimate guide!
- Daniel Glejzner, founder of Angular Space, Nx Champion