book

Effective Angular

Name: Effective Angular
Author: Roberto Heckers
ISBN: 9781805125532

by Roberto Heckers

August 2024

Intermediate to advanced

400 pages

11h 15m

English

Packt Publishing

Read now

Unlock full access

Effective Angular
ContributorsAbout the authorAbout the reviewers
Preface
Who this book is forWhat this book coversTo get the most out of this bookDownload the example code filesConventions usedGet in touchShare Your ThoughtsDownload a free PDF copy of this book
Part 1:Angular Basics and Setting Up Scalable Nx Workspaces
Chapter 1: Scalable Front-End Architecture for Angular Applications
Technical requirementsUnderstanding scalable front-end applicationsWhat is scalability?Why is front-end architecture important?Different approaches to scaling front-end applicationsMonorepo or polyrepoArchitectural patterns for Angular applicationsDesign patterns used within Angular applicationsWhat is Nx and why should you use it?How Nx helps you build Angular monorepos that scaleSetting up a scalable Angular workspaceWhat did Nx create in our new workspace?Improving our Nx workspace for better Angular developmentStructuring Angular applications and librariesDo you create a new library or reuse an existing one?Summary
Chapter 2: Powerful Angular Features
What makes Angular so powerful?New features in the Angular frameworkStandalone componentsDependency injection using the inject functionDirective compositionAngular SignalsAngular control flowOther noteworthy new Angular featuresA deep dive into Angular routingCreating new componentsConfiguring routes in Angular applicationsRoute configuration optionsComponent communicationReceiving values with the @input() decoratorEmitting values with the @Output() decoratorTwo-way data binding using @Input and @OutputOther component communication methodsDependency injectionProviding dependenciesInjecting dependenciesUsing the inject function for better dependency injectionDependency instances, injector hierarchy, and resolution modifiersSummary
Chapter 3: Enhancing Your Applications with Directives, Pipes, and Animations
Using and creating Angular directivesAngular attribute directivesAngular structural directivesDirective selectorsAngular directive compositionTransforming values using Angular pipesUsing pipes in HTML templates and TypeScript filesIs it pure or impure?Using AsyncPipeBuilding your own pipesCreating and reusing stunning animationsSummary
Chapter 4: Building Forms Like a Pro
Understanding the different types of forms in AngularBuilding template-driven formsCreating a forms library with a form componentCreating a template-driven formBuilding reactive formsCreating a reactive formCreating forms dynamicallySummary
Part 2:Handling Application State and Writing Cleaner, More Scalable Code
Chapter 5: Creating Dynamic Angular Components
A deep dive into Angular content projectionCreating a modal component using content projectionExploring multi-slot content projection with ng-content selectDisplaying projected content multiple times or conditionallyUsing template references and variablesUsing template variables effectivelyUsing TemplateRef elements effectivelyRendering components dynamicallyRendering components dynamically using ngComponentOutletUsing an injector with ngComponentOutletLazy loading dynamic componentsRendering components dynamically using the defer control flowSummary
Chapter 6: Applying Code Conventions and Design Patterns in Angular
Exploring commonly used code conventions and best practices in Angular applicationsNaming conventionsStructural conventionsUsing best practices in Angular applicationsExploring commonly used design patterns in Angular applicationsCreational design patterns in AngularStructural design patterns in AngularBehavioral design patterns in AngularBuilding a generic HTTP service containing a model adapterUsing the generic HTTP serviceProviding mock data for our API requestsSummary

Chapter 7: Mastering Reactive Programming in Angular
What is reactive programming?Highlights of reactive programmingDrawbacks of reactive programmingReactive programming in AngularReactive programming using RxJSWhat are Observables?Unsubscribing from ObservablesUsing and creating RxJS operatorsTypes of operatorsFlattening multiple Observable streams using flattening operatorsPowerful and useful RxJS operatorsCreating combined and reusable RxJS operatorsReactive programming using Angular SignalsUsing Signals, computed Signals, and Signals effectsCombining Signals and RxJSUsing toSignalUsing toObservableChoosing between Signals and RxJSSummary
Chapter 8: Handling Application State with Grace
Understanding application stateDifferent levels of application stateFundamental concepts within state managementHandling global application state using RxJSBuilding a state management solution using RxJSConnecting your state management and view layer with a facade serviceHandling global application state using SignalsThe problem with using RxJS or Signals for global state managementHandling global application state with NgRxInstalling the @ngrx/store and @ngrx/effects packagesDefining your first NgRx actionsCreating your first NgRx effectCreating your initial state and first reducer functionsDefining NgRx selectorsAdjusting the facade service so that they use NgRx state managementAdding additional actions, effects, reducers, and selectorsSummary
Part 3:Getting Ready for Production with Automated Tests, Performance, Security, and Accessibility
Chapter 9: Enhancing the Performance and Security of Angular Applications
Understanding Angular change detectionZone.js and AngularImproving change detection efficiencyAngular change detection and SignalsEnhancing the performance of Angular applicationsUnderstanding and using the runOutsideAngular() methodUnderstanding and using the NgOptimizedImage directiveUnderstanding and using the trackBy and track functionsUnderstanding and using web workers in AngularBuilding secure Angular applicationsSetting up route guardsAngular attack surfaces and how to mitigate themSummary
Chapter 10: Internationalization, Localization, and Accessibility of Angular Applications
Adding translatable content in Angular applicationsInstalling Transloco in your Nx monorepoTranslating content using TranslocoChanging the Transloco configurations at runtimeLocalization for Angular applicationsLocalizing currencies using the translocoCurrency pipeLocalizing dates using the translocoDate pipeLocalizing numbers using the translocoDecimal pipeMaking your Angular applications accessible to everyoneHow to make Angular applications accessibleUsing the tabindex attributeAdding ARIA attributesSummary
Chapter 11: Testing Angular Applications
Different types of application testingUnderstanding unit testsUnderstanding end-to-end testsUnderstanding component testsUnderstanding integration testsUnit testing of Angular applications using JestSetting the coverage thresholdAdding additional configurationsWriting and running unit testsAdding additional unit tests for the expenses-registration applicationEnd-to-end testing of Angular applications using CypressWriting your first e2e testDefining page objects for e2e testingUsing fixtures in your e2e testsSummary
Chapter 12: Deploying Angular Applications
Building and linting Angular applications inside your Nx monorepoLinting Nx projectsBuilding your Angular libraries and applicationsAnalyzing your build outputAutomatically deploying Angular applicationsCreating an access tokenCreating a .yml fileDeploying the application to GitHub PagesFixing workflow failsSummary
Index
Why subscribe?
Other Books You May EnjoyPackt is searching for authors like youShare Your ThoughtsDownload a free PDF copy of this book

Content preview from Effective Angular

3 Enhancing Your Applications with Directives, Pipes, and Animations

When building frontend applications, we often need to enhance, transform, add, remove, or replace DOM elements and values within HTML templates. The Angular framework facilitates this through the use of directives, pipes, and animations. This chapter will explain how to create and use directives, pipes, and animations within Angular. By the end of this chapter, you will know all the ins and outs of directives, from directive composition to creating directives with powerful selectors. You will also learn about making custom pipes and using the built-in pipes effectively. Lastly, we will explore how to build and reuse animations within applications built using Angular.

This chapter ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781805125532

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

Effective Angular

by Roberto Heckers

3

Enhancing Your Applications with Directives, Pipes, and Animations

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.