Engineering Metrology & Measurements

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. Modern Angular 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 Symbols A B C D E F G H I K L M N O P R S T U V W X Z