Modern Angular: Also covers signals, standalone, SSR, zoneless, and more

Modern Angular
copyright
dedication
contents
preface
acknowledgments
about this book
   Who should read this book
   How this book is organized: A road map
   About the code
   liveBook discussion forum
about the author
about the cover illustration
1 Welcome to modern Angular
   1.1 What to expect
      1.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 was
      1.2.1 Angular’s core features
      1.2.2 What is an Angular application?
   1.3 Let’s start a modern Angular app
      1.3.1 Using the Angular CLI
      1.3.2 Creating a new project
      1.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 goals
      1.4.4 New features
      1.4.5 What about the future?
      1.4.6 The learning process
   Summary
2 A standalone future
   2.1 Why abandon NgModules?
      2.1.1 Hard to learn, hard to explain
      2.1.2 Indirectness and boilerplate
      2.1.3 Other concerns with NgModules
   2.2 Previous solutions
      2.2.1 Hierarchic shared modules
      2.2.2 Enter SCAMs
   2.3 Developing apps without NgModules
      2.3.1 Creating our first standalone component
      2.3.2 Routing standalone components and providing dependencies
   2.4 Lazy-loading components
      2.4.1 Lazy-loading with NgModules
      2.4.2 Lazy-loading a single standalone component
      2.4.3 Lazy-loading several standalone components
      2.4.4 Providing dependencies only to certain routes
      2.4.5 Lazy-loading a component into another component
   2.5 Migrations and common pitfalls
      2.5.1 Migrating by hand
      2.5.2 Using SCAMs
      2.5.3 Migrating with a schematic command
      2.5.4 Handling circular dependencies
   2.6 Exercises for the reader
   Summary
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 mechanism
      3.1.3 Dependency injection the Angular way
      3.1.4 Injection contexts
   3.2 The inject function
      3.2.1 Another way of injecting dependencies
      3.2.2 Injecting dependencies outside classes
      3.2.3 Why we should always use inject
      3.2.4 What about the drawbacks?
   3.3 Functional guards, resolvers, and interceptors
      3.3.1 Building an AuthGuard
      3.3.2 Building an EmployeeResolver
      3.3.3 Adding tokens to HTTP requests
      3.3.4 Migrating to functional guards/resolvers/interceptors
   3.4 DI deep dive
      3.4.1 DI lookup and how to modify it
      3.4.2 Truncating text with DI
   3.5 Exercises for the reader
   Summary
4 New capabilities of Angular building blocks
   4.1 Powerful inputs
      4.1.1 Required inputs
      4.1.2 Transforming input values
      4.1.3 Binding routing parameters to input properties
      4.1.4 Inputs for dynamic components
   4.2 Host directives
      4.2.1 Extending existing directives
      4.2.2 Using multiple directives and adding inputs
      4.2.3 Things to know when using host directives
   4.3 Type-safe reactive forms
      4.3.1 Downsides of using untyped forms
      4.3.2 Introducing type-safe forms
      4.3.3 Common pitfalls when working with type-safe forms
      4.3.4 Migrating to type-safe forms
      4.3.5 Form events
   4.4 NgOptimizedImage
      4.4.1 Adding lazy loading and remembering to set width/height
      4.4.2 Prioritizing image loading
      4.4.3 Srcsets and image loaders
   4.5 Other improvements
      4.5.1 Self-closing component tags
      4.5.2 Fetch-based HttpClient
      4.5.3 Support for default export components in routing
      4.5.4 Improved error messages
   4.6 Exercises for the reader
   Summary
5 RxJS in modern Angular
   5.1 What is reactive programming?
   5.2 Why we (still) need RxJS
   5.3 Unsubscribing from observables
      5.3.1 Why unsubscribe?
      5.3.2 Problems with unsubscribing
      5.3.3 Introducing DestroyRef
      5.3.4 The takeUntilDestroyed operator
   5.4 Writing our own custom RxJS operators
      5.4.1 What is an RxJS operator?
      5.4.2 How do operators work?
      5.4.3 Building custom operators
   5.5 Exercises for the reader
   Summary
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 signals
      6.2.2 Updating signals
      6.2.3 Creating signals vs. observables
   6.3 Building Angular components with signals
      6.3.1 Creating TimeOffComponent
      6.3.2 Handling signals in Angular components
   6.4 Computed signals
      6.4.1 Creating computed signals
      6.4.2 Simplifying complex logic in Angular components using computed signals
   6.5 Effects
      6.5.1 Creating effects
      6.5.2 Important things to know about effects
      6.5.3 When to use effects
   6.6 RxJS and signals interoperability
      6.6.1 Converting observables to signals
      6.6.2 Converting signals to observables
   6.7 Exercises for the reader
   Summary
7 Signals: A deep dive
   7.1 Advanced options when dealing with signals
      7.1.1 Signal equality
      7.1.2 Untracking dependencies
      7.1.3 Manual cleanup
      7.1.4 Readonly signals and synchronizing with RxJS
   7.2 Signals under the hood
      7.2.1 The nature of signals
      7.2.2 How changes to signals propagate
   7.3 State management with signals
      7.3.1 State management: The task
      7.3.2 State management: The implementation
      7.3.3 State management: The problems
      7.3.4 Advanced interoperability with RxJS
   7.4 Migrating to signals
      7.4.1 Migrating RxJS-heavy Angular applications
      7.4.2 Migrating more traditional Angular applications
   7.5 The future of signals
      7.5.1 Signal-based components
      7.5.2 Signal inputs and outputs
      7.5.3 Everything else
   7.6 Exercises for the reader
   Summary
8 Unit testing in modern Angular
   8.1 Unit testing: The what and the why
      8.1.1 Prerequisites
      8.1.2 What is a unit test?
      8.1.3 Why do we want unit tests?
   8.2 Configuring a testing environment
      8.2.1 Choosing a test runner
      8.2.2 Setting up the test runner
      8.2.3 Installing third-party tools
   8.3 Running Angular unit tests
      8.3.1 What do unit tests look like?
      8.3.2 Providing mock dependencies
      8.3.3 Testing components
      8.3.4 Testing services
      8.3.5 Testing signals
   8.4 Powers of AI with Angular unit tests
      8.4.1 Unit testing Angular applications with ChatGPT
      8.4.2 Unit testing Angular applications with GitHub Copilot
   8.5 The future of unit testing in Angular
   8.6 Exercises for the reader
   Summary
9 Modern Angular everywhere
   9.1 What is server-side rendering?
      9.1.1 SSR: The what
      9.1.2 SSR: The why
      9.1.3 SSR: The how
   9.2 Building Angular apps with SSR from scratch
      9.2.1 How is an SSR Angular application different from a SPA?
      9.2.2 Running an SSR Angular application
      9.2.3 Building components in an SSR Angular application
   9.3 Improving Angular SSR
      9.3.1 HTTP caching
      9.3.2 Client-side hydration
      9.3.3 Prerendering
   9.4 Building an Angular application
      9.4.1 What does building an Angular application mean?
      9.4.2 ESBuild and Vite
      9.4.3 Configuring environments for Angular applications
      9.4.4 Preparing to deploy Angular applications
   9.5 Exercises for the reader
   Summary
10 What’s next in modern Angular?
   10.1 New template syntax
      10.1.1 Goodbye ngIf!
      10.1.2 Hello @for!
      10.1.3 @switch
      10.1.4 Migrating to the new template syntax
   10.2 Deferrable views
      10.2.1 Deferring a simple component
      10.2.2 Deferring depending on a condition or trigger
      10.2.3 Customizing deferred loading
   10.3 Zoneless Angular applications
      10.3.1 How change detection works in Angular
      10.3.2 Why change detection in Angular needs to improve
      10.3.3 ChangeDetectionStrategy.OnPush
      10.3.4 Introducing granular change detection
      10.3.5 Zoneless scheduler for change detection
   10.4 In other news
   Summary
index