Angular Cookbook
Over 80 actionable recipes every Angular developer should know
1. Auflage
Erschienen am 29. Dezember 2023
536 Seiten
978-1-80324-807-3 (ISBN)
Beschreibung
Angular has long been the framework of choice for web development projects of various scales, offering much-needed stability and a rich tooling ecosystem for building production-ready web and mobile apps. This recipe-based guide ensures high performance apps with the latest version of Angular, helping you to build up your Angular expertise with a wide range of recipes across key tasks in web development.
In this second edition, the recipes have been updated, added, and improved based on developer feedback, new challenges, and Angular 17. The first few chapters will show you how to utilize core Angular concepts such as components, directives, and services to get you ready for building frontend web apps. You'll then develop web components with Angular and go on to learn about advanced concepts such as dynamic components loading and state management with NgRx for achieving real-time performance.
Later chapters will focus on recipes for effectively testing your Angular apps to make them fail-safe, before progressing to techniques for optimizing your app's performance. Finally, you'll create Progressive Web Apps (PWA) with Angular to provide an intuitive experience for users.
By the end of this book, you'll be able to create full-fledged, professional-looking Angular apps and have the skills you need for frontend development.
Alle Preise
Weitere Details
Weitere Ausgaben
Inhalt
- Cover
- Copyright
- Contributors
- Table of Contents
- Preface
- Chapters 1: Winning Component Communication
- Technical requirements
- Component communication using component @Input and @Output properties
- Getting ready
- How to do it.
- How it works.
- See also
- Component communication using services
- Getting ready
- How to do it.
- How it works.
- See also
- Using setters for intercepting input property changes
- Getting ready
- How to do it.
- How it works.
- See also
- Using ngOnChanges to intercept input property changes
- Getting ready
- How to do it.
- How it works.
- See also
- Accessing a child component in a parent template via template variables
- Getting ready
- How to do it.
- How it works.
- See also
- Accessing a child component in a parent component class using ViewChild
- Getting ready
- How to do it.
- How it works.
- See also
- Standalone components and passing data through route params
- Getting ready
- How to do it.
- How it works.
- See also
- Component communication using signals
- Getting ready
- How to do it
- How it works
- See also
- Chapters 2: Working with Angular Directives and Built-In Control Flow
- Technical requirements
- Using attribute directives to handle the appearance of elements
- Getting ready
- How to do it.
- How it works.
- See also
- Creating a directive to calculate the read time for articles
- Getting ready
- How to do it.
- How it works.
- See also
- Creating a directive that allows you to vertically scroll to an element
- Getting ready
- How to do it.
- How it works.
- See also
- Writing your first custom structural directive
- Getting ready
- How to do it.
- How it works.
- See also
- How to apply multiple structural directives to the same element
- Getting ready
- How to do it.
- How it works.
- See also
- Applying multiple directives to the same element using the Directive Composition API
- Getting ready
- How to do it.
- How it works.
- See also
- Chapters 3: The Magic of Dependency Injection in Angular
- Technical requirements
- Using Angular DI tokens
- Getting ready
- How to do it...
- How it works.
- See also
- Optional dependencies
- Getting ready
- How to do it.
- How it works
- See also
- Creating a singleton service using providedIn
- Getting ready
- How to do it
- How it works
- See also
- Creating a singleton service using forRoot()
- Getting ready
- How to do it
- How it works
- See also
- Providing alternate classes against the same DI Token
- Getting ready
- How to do it
- How it works
- See also
- Dynamic configurations using value providers
- Getting ready
- How to do it
- How it works
- See also
- Chapters 4: Understanding Angular Animations
- Technical requirements
- Creating your first two-state Angular animation
- Getting ready
- How to do it.
- How it works.
- See also
- Working with multi-state animations
- Getting ready
- How to do it.
- How it works.
- See also
- Creating complex Angular animations using keyframes
- Getting ready
- How to do it.
- How it works.
- See also
- Animating lists in Angular using stagger animations
- Getting ready
- How to do it.
- How it works.
- See also
- Sequential vs parallel animations in Angular
- Getting ready
- How to do it.
- How it works.
- See also
- Route animations in Angular
- Getting ready
- How to do it.
- How it works.
- See also
- Disabling Angular animations conditionally
- Getting ready
- How to do it.
- How it works.
- See also
- Chapters 5: Angular and RxJS - Awesomeness Combined
- Technical requirements
- Sequential and parallel http calls in Angular with RxJS
- Getting ready
- How to do it.
- How it works.
- See also
- Listening to multiple observable streams
- Getting ready
- How to do it.
- How it works.
- See also
- Unsubscribing streams to avoid memory leaks
- Getting ready
- How to do it.
- How it works.
- There's more.
- See also
- Using Angular's async pipe to unsubscribe streams automatically
- Getting ready
- How to do it.
- How it works.
- See also
- Using the map operator to transform data
- Getting ready
- How to do it.
- How it works.
- See also
- Using the switchMap and debounceTime operators with autocompletes for better performance
- Getting ready
- How to do it.
- How it works.
- See also
- Creating a custom RxJS operator
- Getting ready
- How to do it.
- How it works.
- See also
- Retrying failed HTTP calls with RxJS
- Getting ready
- How to do it.
- How it works.
- See also
- Chapters 6: Reactive State Management with NgRx
- Technical requirements
- Creating your first NgRx store with actions and reducers
- Getting ready
- How to do it.
- See also
- Using NgRx Store Devtools to debug state changes
- Getting ready
- How to do it.
- How it works.
- There's more.
- See also
- Using NgRx selectors to select and render state in components
- Getting ready
- How to do it.
- How it works.
- See also
- Using NgRx effects to fetch data from API calls
- Getting ready
- How to do it.
- How it works.
- See also
- Using NgRx Component Store to manage the state of a component
- Getting ready
- How to do it.
- How it works.
- See also
- Chapters 7: Understanding Angular Navigation and Routing
- Technical requirements
- Creating routes in an Angular (standalone) app
- Getting ready
- How to do it.
- How it works.
- See also
- Lazily loaded routes in Angular
- Getting ready
- How to do it.
- How it works.
- See also
- Preloading route strategies
- Getting ready
- How to do it.
- How it works.
- See also
- Authorized access to routes using route guards
- Getting ready
- How to do it.
- How it works.
- See also
- Working with route parameters
- Getting ready
- How to do it.
- How it works.
- See also
- Showing a global loader between route changes
- Getting ready
- How to do it.
- How it works.
- See also
- Chapters 8: Mastering Angular Forms
- Technical requirements
- Creating your first template-driven form with validation
- Getting ready
- How to do it.
- How it works.
- See also
- Creating your first reactive form with validation
- Getting ready
- How to do it.
- How it works.
- See also
- Testing forms in Angular
- Getting ready
- How to do it.
- How it works.
- See also
- Server-side validation using asynchronous validator functions
- Getting ready
- How to do it.
- How it works...
- See also
- Implementing complex forms with reactive FormArray
- Getting ready
- How to do it.
- How it works.
- See also
- Writing your own custom form control using ControlValueAccessor
- Getting ready
- How to do it.
- How it works.
- See also
- Chapters 9: Angular and the Angular CDK
- Technical requirements
- Using virtual scroll for huge lists
- Getting ready
- How to do it.
- How it works.
- See also
- Keyboard navigation for lists
- Getting ready
- How to do it.
- How it works.
- See also
- Pointy little popovers with the Overlay API
- Getting ready
- How to do it.
- How it works.
- See also
- Input coercion utilities from the Angular CDK
- Getting ready
- How to do it.
- How it works.
- See also
- Using the CDK Drag and Drop API to move items from one list to another
- Getting ready
- How to do it.
- How it works.
- See also
- Creating a multi-step game with the CDK Stepper API
- Getting ready
- How to do it.
- How it works.
- See also
- Accessible listbox interactions using CDK Listbox directives
- Getting ready
- How to do it.
- How it works.
- See also
- Working with nested menus using the Angular CDK Menu API
- Getting ready
- How to do it.
- How it works.
- See also
- Chapters 10: Writing Unit Tests in Angular with Jest
- Technical requirements
- Setting up unit tests in Angular with Jest
- Getting ready
- How to do it...
- Bonus: Migrating to Jest in Angular v16
- See also
- Providing global mocks for Jest
- Getting ready
- How to do it...
- How it works...
- See also
- Mocking Angular services using stubs
- Getting ready
- How to do it...
- How it works...
- See also
- Using spies on an injected service in a unit test
- Getting ready
- How to do it...
- How it works...
- See also
- Mocking child components and directives using the ng-mocks package
- Getting ready
- How to do it...
- How it works...
- See also
- Writing even easier tests with Angular CDK component harnesses
- Getting ready
- How to do it...
- How it works...
- See also
- Unit-testing responses from HTTP calls
- Getting ready
- How to do it...
- How it works...
- See also
- Unit-testing Angular pipes
- Getting ready
- How to do it...
- See also
- Chapters 11: E2E Tests in Angular with Cypress
- Technical requirements
- Writing your first Cypress test
- Getting ready
- How to do it.
- How it works.
- See also
- Validating if a DOM element is visible on the view
- Getting ready
- How to do it.
- How it works.
- See also
- Testing form inputs and submission
- Getting ready
- How to do it.
- How it works.
- See also
- Waiting for XHRs to finish
- Getting ready
- How to do it.
- How it works.
- See also
- Using Cypress bundled packages
- Getting ready
- How to do it.
- How it works.
- See also
- Using Cypress fixtures to provide mock data
- Getting ready
- How to do it.
- How it works.
- See also
- Chapters 12: Performance Optimization in Angular
- Technical requirements
- Using OnPush change detection to prune component subtrees
- Getting ready
- How to do it.
- How it works.
- See also
- Detaching the change detector from components
- Getting ready
- How to do it.
- How it works.
- See also
- Running async events outside Angular with runOutsideAngular
- Getting ready
- How to do it.
- How it works.
- See also
- Using trackBy for lists with *ngFor
- Getting ready
- How to do it.
- How it works.
- See also
- Moving heavy computation to pure pipes
- Getting ready
- How to do it.
- How it works.
- See also
- Using web workers for heavy computation
- Getting ready
- How to do it.
- How it works.
- See also
- Using performance budgets for auditing
- Getting ready
- How to do it.
- How it works.
- See also
- Analyzing bundles with webpack-bundle-analyzer
- Getting ready
- How to do it.
- See also
- Chapters 13: Building PWAs with Angular
- Technical requirements
- Converting an existing Angular app into a PWA with the Angular CLI
- Getting ready
- How to do it.
- How it works.
- See also
- Modifying the theme color for your PWA
- Getting ready
- How to do it.
- See also
- Using dark mode in your PWA
- Getting ready
- How to do it.
- See also
- Providing a custom installable experience in your PWA
- Getting ready
- How to do it.
- How it works.
- See also
- Precaching requests using an Angular service worker
- Getting ready
- How to do it.
- How it works.
- See also
- Creating an App Shell for your PWA
- Getting ready
- How to do it.
- How it works.
- See also
- PacktPage
- Other Books You May Enjoy
- Index
