Angular Cookbook: Over 80 actionable recipes every Angular developer should know

Length: 652 pages
Edition: 1
Language: English
Publisher: Packt Publishing
Publication Date: 2021-08-06
ISBN-10: 1838989439
ISBN-13: 9781838989439
Sales Rank: #354904 (See Top 100 Books)

Discover actionable solutions to everyday problems in building applications with Angular and TypeScript, from app design to production deployment

Key Features

Explore recipes across core Angular topics to fill gaps in your knowledge of using Angular in production
Discover industry best practices and tooling to enhance your development experience with Angular
Understand advanced topics in Angular to help you become a proficient enterprise web developer

Book Description

The Angular framework, powered by Google, is the framework of choice for many web development projects built across varying scales. It’s known to provide much-needed stability and a rich tooling ecosystem for building production-ready web and mobile apps. This recipe-based guide enables you to learn Angular concepts in depth using a step-by-step approach. You’ll explore a wide range of recipes across key tasks in web development that will help you build high-performance apps.

The book starts by taking you through core Angular concepts such as Angular components, directives, and services to get you ready for building frontend web apps. You’ll develop web components with Angular and go on to cover 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 Angular book, you’ll be able to create full-fledged, professional-looking Angular apps and have the skills you need for frontend development, which are crucial for an enterprise Angular developer.

What you will learn

Gain a better understanding of how components, services, and directives work in Angular
Understand how to create Progressive Web Apps using Angular from scratch
Build rich animations and add them to your Angular apps
Manage your app’s data reactivity using RxJS
Implement state management for your Angular apps with NgRx
Optimize the performance of your new and existing web apps
Write fail-safe unit tests and end-to-end tests for your web apps using Jest and Cypress
Get familiar with Angular CDK components for designing effective Angular components

Who this book is for

The book is for intermediate-level Angular web developers looking for actionable solutions to common problems in Angular enterprise development. Mobile developers using Angular technologies will also find this book useful. Working experience with JavaScript and TypeScript is necessary to understand the topics covered in this book more effectively.

Winning Components Communication
Understanding and using Angular Directives
The Magic of Dependency Injection in Angular
Understanding Angular Animations
Angular and RxJS – Awesomeness Combined
Reactive State Management with NgRx
Understanding Angular Navigation and Routing
Mastering Angular Forms
Angular and the Angular CDK
Writing Unit Tests in Angular with Jest
E2E Tests in Angular with Cypress
Performance Optimizations in Angular
Building PWAs with Angular

Angular Cookbook
Foreword
Contributors
About the author
About the reviewer
Preface
    Who this book is for
    What this book covers
    To get the most out of this book
    Download the example code files
    Download the color images
    Conventions used
    Get in touch
    Share Your Thoughts
Chapter 1: Winning Components Communication
    Technical requirements
    Components communication using component @Input(s) and @Output(s)
        Getting ready
        How to do it…
        How it works…
        See also
    Components 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 the 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
    Creating your first dynamic component in Angular
        Getting ready
        How to do it…
        How it works…
        See also
Chapter 2: Understanding and Using Angular Directives
    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 basic directive that allows you to vertically scroll to an element
        Getting ready
        How to do it…
        How it works…
        There's more…
    Writing your first custom structural directive
        Getting ready
        How to do it…
        How it works…
        See also
    How to use *ngIf and *ngSwitch together
        Getting ready
        How to do it…
        How it works…
        See also
    Enhancing template type checking for your custom directives
        Getting ready
        How to do it…
        See also
Chapter 3: The Magic of Dependency Injection in Angular
    Technical requirements
    Configuring an injector with a DI token
        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 different services to the app with the same Aliased class provider
        Getting ready
        How to do it
        How it works
        See also
    Value providers in Angular
        Getting ready
        How to do it
        How it works
        See also
Chapter 4: Understanding Angular Animations
    Technical requirements
    Creating your first two-state Angular animation
        Getting ready
        How to do it…
        How it works…
        There's more…
        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
    Using animation callbacks
        Getting ready
        How to do it…
        How it works…
        See also
    Basic route animations in Angular
        Getting ready
        How to do it…
        How it works…
        See also
    Complex route animations in Angular using keyframes
        Getting ready
        How to do it…
        How it works…
        See also
Chapter 5: Angular and RxJS – Awesomeness Combined
    Technical requirements
    Working with RxJS operators using instance methods
        Getting ready
        How to do it…
        How it works…
        See also
    Working with RxJS operators using static methods
        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 an Observable with the async pipe to synchronously bind data to your Angular templates
        Getting ready
        How to do it…
        How it works…
        See also
    Using combineLatest to subscribe to multiple streams together
        Getting ready
        How to do it…
        How it works…
        See also
    Using the flatMap operator to create sequential HTTP calls
        Getting ready
        How to do it…
        How it works…
        See also
    Using the switchMap operator to switch the last subscription with a new one
        Getting ready
        How to do it… 
        How it works…
        See also
    Debouncing HTTP requests using RxJS
        Getting ready
        How to do it…
        How it works…
        See also
Chapter 6: Reactive State Management with NgRx 
    Technical requirements
    Creating your first NgRx store with actions and reducer
        Getting ready
        How to do it…
        See also
    Using @ngrx/store-devtools to debug the state changes
        Getting ready
        How to do it…
        How it works…
        There's more…
        See also
    Creating an effect to fetch third-party API data
        Getting ready
        How to do it…
        How it works…
        See also
    Using selectors to fetch data from stores in multiple components
        Getting ready
        How to do it…
        How it works…
        See also
    Using @ngrx/component-store for local state management within a component
        Getting ready
        How to do it…
        How it works…
        See also
    Using @ngrx/router-store to work with route changes reactively
        Getting ready
        How to do it…
        How it works…
        See also
Chapter 7: Understanding Angular Navigation and Routing
    Technical requirements
    Creating an Angular app with routes using the CLI
        Getting ready
        How to do it…
        How it works…
        See also
    Feature modules and lazily loaded routes
        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
    Preloading route strategies
        Getting ready
        How to do it…
        How it works…
        See also
Chapter 8: Mastering Angular Forms
    Technical requirements
    Creating your first template-driven Angular form
        Getting ready
        How to do it…
        How it works…
        See also
    Form validation with template-driven forms
        Getting ready
        How to do it…
        How it works…
        See also
    Testing template-driven forms
        Getting ready
        How to do it…
        How it works…
        See also
    Creating your first Reactive form
        Getting ready
        How to do it…
        How it works…
        See also
    Form validation with Reactive forms
        Getting ready
        How to do it…
        How it works…
        See also
    Creating an asynchronous validator function
        Getting ready
        How it works…
        See also
    Testing Reactive forms
        Getting ready
        How to do it…
        How it works…
        See also
    Using debounce with Reactive form control
        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
Chapter 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
    Using CDK Clipboard to work with the system clipboard
        Getting ready
        How to do it…
        How it works…
        See also
    Using CDK Drag and Drop 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
    Resizing text inputs with the CDK TextField API
        Getting ready
        How to do it…
        How it works…
        See also
Chapter 10: Writing Unit Tests in Angular with Jest
    Technical requirements
    Setting up unit tests in Angular with Jest
        Getting ready
        How to do it...
        See also
    Providing global mocks for Jest
        Getting ready
        How to do it...
        How it works...
        See also
    Mocking 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
    Creating even easier component tests with Angular CDK component harnesses
        Getting ready
        How to do it...
        How it works...
        See also
    Unit testing components with Observables
        Getting ready
        How to do it...
        How it works...
        See also
        Unit testing Angular Pipes
        Getting ready
        How to do it...
        See also
Chapter 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
Chapter 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…
        See also
    Analyzing bundles with webpack-bundle-analyzer
        Getting ready
        How to do it…
        See also
Chapter 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
    Why subscribe?
Other Books You May Enjoy
    Packt is searching for authors like you
    Share Your Thoughts

Programming User Experience & Usability Web Design

Donate to keep this site alive

To access the Link, solve the captcha.

How to download source code?

1. Go to: https://github.com/PacktPublishing

2. In the Find a repository… box, search the book title: Angular Cookbook: Over 80 actionable recipes every Angular developer should know, sometime you may not get the results, please search the main title.

Angular Cookbook: Over 80 actionable recipes every Angular developer should know

Key Features

Book Description

What you will learn

Who this book is for

Table of Contents

How to download source code?

Bootstrapping Microservices, 2nd Edition: With Docker, Kubernetes, GitHub Actions, and Terraform

Linkerd: Up and Running: A Guide to Operationalizing a Kubernetes-native Service Mesh

Web API Development with ASP.NET Core 8: Learn techniques, patterns, and tools for building high-performance, robust, and scalable web APIs

Web API Cookbook: Level Up Your JavaScript Applications

Advanced JavaScript Unleashed: Master Advanced JavaScript Concepts like Prototypes, Symbols, Generators and More

ASP.NET Core 8 and Angular, 6th Edition: Full-stack web development with ASP.NET Core 8 and Angular