Learning Angular: A practical guide to building web applications with modern Angular. 5 Ed

Preface xixChapter 1: Building Your First Angular Application 1Technical requirements ....2What is Angular? ....2Why choose Angular? ....4Cross-platform • 4Tooling • 4Onboarding • 5The usage of Angular worldwide • 5Setting up the Angular CLI workspace ....6Prerequisites • 6Node.js • 6npm • 7Git • 7Installing the Angular CLI • 7CLI commands • 8Creating a new project • 9The structure of an Angular application ....12Components • 13Bootstrapping • 13Template syntax • 14Angular tooling ....16Angular DevTools • 16VSCode Debugger • 20VSCode Profiles • 22Angular Language Service • 22Material Icon Theme • 24EditorConfig • 24Summary ....25Chapter 2: Introduction to TypeScript 27Technical requirements ....27JavaScript essentials ....28Variable declaration • 28Function parameters • 31Arrow functions • 32Optional chaining • 33Nullish coalescing • 34Classes • 35Modules • 36What is TypeScript? ....37Getting started with TypeScript ....39Types • 41String • 42Boolean • 42Number • 42Array • 42any • 43Custom types • 43Functions • 44Classes • 45Interfaces • 48Generics • 50Utility types • 52Summary • 52Chapter 3: Structuring User Interfaces with Components 55Technical requirements ....55Creating our first component ....56The structure of an Angular component • 56Creating components with the Angular CLI • 58Interacting with the template ....60Loading the component template • 60Displaying data from the component class • 62Controlling data representation • 63Class binding • 71Style binding • 72Getting data from the template • 73Component inter-communication ....75Passing data using an input binding • 75Listening for events using an output binding • 77Emitting data through custom events • 80Local reference variables in templates • 81Encapsulating CSS styling ....82Deciding on a change detection strategy ....85Introducing the component lifecycle ....89Performing component initialization • 90Cleaning up component resources • 91Detecting input binding changes • 93Accessing child components • 95Summary ....96Chapter 4: Enriching Applications Using Pipes and Directives 99Technical requirements ....99Manipulating data with pipes ....99Building pipes ....106Sorting data using pipes • 106Passing parameters to pipes • 110Change detection with pipes • 112Building directives ....113Displaying dynamic data • 114Property binding and responding to events • 118Summary ....120Chapter 5: Managing Complex Tasks with Services 121Technical requirements ....122Introducing Angular DI ....122Creating our first Angular service ....124Injecting services in the constructor • 126The inject keyword • 128Providing dependencies across the application ....129Injecting services in the component tree ....133Sharing dependencies through components • 133Root and component injectors • 138Sandboxing components with multiple instances • 139Restricting provider lookup • 145Overriding providers in the injector hierarchy ....147Overriding service implementation • 147Providing services conditionally • 149Transforming objects in Angular services • 151Summary ....153Chapter 6: Reactive Patterns in Angular 155Technical requirements ....155Strategies for handling asynchronous information ....156Shifting from callback hell to promises • 156Observables in a nutshell • 160Reactive programming in Angular ....162The RxJS library ....165Creating observables • 166Transforming observables • 167Subscribing to observables ....169Unsubscribing from observables ....172Destroying a component • 172Using the async pipe • 174Summary ....176Chapter 7: Tracking Application State with Signals 177Technical requirements ....177Understanding signals ....178Reading and writing signals ....178Computed signals ....180Cooperating with RxJS ....182Summary ....185Chapter 8: Communicating with Data Services over HTTP 187Technical requirements ....187Communicating data over HTTP ....188Introducing the Angular HTTP client ....189Setting up a backend API ....191Handling CRUD data in Angular ....192Fetching data through HTTP • 192Modifying data through HTTP • 202Adding new products • 203Updating product price • 207Removing a product • 210Authentication and authorization with HTTP ....214Authenticating with a backend API • 214Authorizing user access • 216Authorizing HTTP requests • 218Summary ....222Chapter 9: Navigating through Applications with Routing 223Technical requirements ....224Introducing the Angular router ....224Specifying a base path • 226Enabling routing in Angular applications • 226Configuring the router • 227Rendering components • 228Configuring the main routes ....228Organizing application routes ....232Navigating imperatively to a route • 233Using built-in route paths • 238Styling router links • 239Passing parameters to routes ....240Building a detail page using route parameters • 240Reusing components using child routes • 245Taking a snapshot of route parameters • 247Filtering data using query parameters • 248Binding input properties to routes • 250Enhancing navigation with advanced features ....252Controlling route access • 252Preventing navigation away from a route • 254Prefetching route data • 256Lazy-loading parts of the application • 259Protecting a lazy-loaded route • 262Summary ....263Chapter 10: Collecting User Data with Forms 265Technical requirements ....265Introducing web forms ....265Building template-driven forms ....267Building reactive forms ....271Interacting with reactive forms • 271Creating nesting form hierarchies • 276Modifying forms dynamically • 278Using a form builder • 285Validating input in forms ....288Global validation with CSS • 288Validation in template-driven forms • 290Validation in reactive forms • 294Building custom validators • 297Manipulating form state ....303Updating form state • 303Reacting to state changes • 304Summary ....306Join Us on Discord ....306Chapter 11: Handling Application Errors 307Technical requirements ....307Handling runtime errors ....308Catching HTTP request errors • 308Creating a global error handler • 312Responding to the 401 Unauthorized error • 315Demystifying framework errors ....316Summary ....318Chapter 12: Introduction to Angular Material 319Technical requirements ....319Introducing Material Design ....320Introducing Angular Material ....320Installing Angular Material • 321Adding UI components • 324Theming UI components • 325Integrating UI components ....329Form controls • 330Input • 330Select • 335Chips • 337Navigation • 338Layout • 340Card • 341Data table • 344Popups and overlays • 350Creating a confirmation dialog • 350Configuring dialogs • 353Getting data from dialogs • 354Displaying user notifications • 355Summary ....359Chapter 13: Unit Testing Angular Applications 361Technical requirements ....362Why do we need unit tests? ....362The anatomy of a unit test ....363Introducing unit tests in Angular ....365Testing components ....366Testing with dependencies • 370Replacing the dependency with a stub • 371Spying on the dependency method • 375Testing asynchronous services • 378Testing with inputs and outputs • 380Testing with a component harness • 383Testing services ....385Testing synchronous/asynchronous methods • 386Testing services with dependencies • 387Testing pipes ....389Testing directives ....390Testing forms ....392Testing the router ....395Routed and routing components • 395Guards • 398Resolvers • 401Summary ....403Chapter 14: Bringing Applications to Production 405Technical requirements ....406Building an Angular application ....406Building for different environments • 408Building for the window object • 410Limiting the application bundle size ....411Optimizing the application bundle ....412Deploying an Angular application ....415Summary ....416Chapter 15: Optimizing Application Performance 417Technical requirements ....418Introducing Core Web Vitals ....418Rendering SSR applications ....422Overriding SSR in Angular applications • 425Optimizing image loading ....428Deferring components ....430Introducing deferrable views • 430Using deferrable blocks • 431Loading patterns in @defer blocks • 437Prerendering SSG applications ....440Summary ....441Other Books You May Enjoy 445Index 449