Angular Design Patterns and Best Practices: Create scalable and adaptable applications that grow to meet evolving user needs

Cover....1 Title Page....2 Copyright and Credits....3 Foreword....5 Contributors....7 Table of Contents....10 Preface....16 Part 1: Reinforcing the Foundations....22 Chapter 1: Starting Projects the Right Way....24 Technical requirements....24 Why choose Angular?....25 Batteries included....25 Google support....25 Community....25 Tooling....26 What technologies are present in the ecosystem?....26 TypeScript....26 RXJS....27 Karma and Jasmine....27 Webpack....27 Configuring your development environment....28 VS Code....28 VS Code settings....30 Fira Code font and ligatures....30 Standardizing the extensions and settings in the project....31 Angular DevTools....32 Starting an Angular project....33 Project structure....36 Using the Angular CLI for your productivity....37 ng add....37 ng update....38 ng serve....38 ng build....39 ng deploy....39 ng generate....39 Summary....40 Chapter 2: Organizing Your Application....42 Technical requirements....42 Organizing the application with Angular modules....43 declarations....43 providers....44 imports....44 exports....44 The first module – AppModule....45 What is the difference between Angular and JavaScript modules?....45 Modules type....46 Avoiding anti-pattern – single module app....50 Optimizing the usage of common modules – the SharedModule pattern....51 Improving the size of your app – lazy loading....53 Summary....57 Chapter 3: TypeScript Patterns for Angular....58 Technical requirements....58 Creating classes and types....59 Primitive and basic types....59 Classes....61 Interfaces....64 Type aliases....66 When to use classes, interfaces, or types....67 Creating methods and functions....68 Working with null values....69 Decreasing verbosity – type inference....70 Validating types – type guards....71 Using a better alternative to the any type....73 Summary....75 Chapter 4: Components and Pages....76 Technical requirements....76 Creating components....77 Communication between components – inputs and outputs....81 Best practice – using the TrackBy property....84 Separating responsibilities – Smart and Presentation components....86 Communication from the child component – using @Output....89 Propagating events from nested components....91 Summary....95 Chapter 5: Angular Services and the Singleton Pattern....96 Technical requirements....96 Creating services....97 Understanding the dependency injection pattern....99 Using the inject() function....101 Communication between components using services....101 REST API consumption....104 Summary....108 Part 2: Leveraging Angular’s Capabilities....110 Chapter 6: Handling User Inputs: Forms....112 Technical requirements....112 Template-driven forms....113 Reactive forms....118 Data validation....122 Custom validations....125 Typed reactive forms....128 Summary....129 Chapter 7: Routes and Routers....130 Technical requirements....130 Routes and navigation....131 Defining an error page and title....134 Dynamic routes – wildcards and parameters....137 Securing routes – guards....143 Optimizing the experience – Resolve....150 Summary....152 Chapter 8: Improving Backend Integrations: the Interceptor Pattern....154 Technical requirements....155 Attaching the token to the request with an interceptor....155 Changing the request route....160 Creating a loader....162 Notifying success....165 Measuring the performance of a request....167 Summary....169 Chapter 9: Exploring Reactivity with RxJS....170 Technical requirements....170 Observables and operators....171 Handling data – transformation operators....172 Another way to subscribe – the async pipe....174 Connecting information flows – high-order operators....177 Optimizing data consumption – filter operators....178 How to choose the correct operator....180 Summary....182 Part 3: Architecture and Deployment....184 Chapter 10: Design for Tests: Best Practices....186 Technical requirements....186 What to test....187 Service tests....190 Fixing the tests and understanding TestBed....194 Component testing....198 E2E tests with Cypress....200 Summary....205 Chapter 11: Micro Frontend with Angular Elements....206 Technical requirements....206 Micro frontend – concepts and application....207 When to use a micro frontend....207 When not to use a micro frontend project....207 Slicing your application into micro frontends....208 Creating a micro frontend application with standalone components....209 Preparing a page to be loaded by the base application....214 Dynamically loading micro frontends....217 Summary....221 Chapter 12: Packaging Everything – Best Practices for Deployment....222 Technical requirements....222 Deploying the backend....223 Differentiating environments....228 Preparing the production bundle....231 Mounting a Docker image with Nginx....234 Deploying a page to Azure Static Web Apps....236 Summary....240 Chapter 13: The Angular Renaissance....242 Technical requirements....242 Updating your project with the Angular CLI....243 Using a new way to create templates – control flow....244 Improving the user experience using the defer command....247 Creating transitions between pages – view transactions....251 Simplifying application states – Angular Signals....253 Summary....258 Index....260 Other Books You May Enjoy....267