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

Angular Design Patterns and Best Practices

Copyright © 2024 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Group Product Manager: Rohit Rajkumar

Publishing Product Manager: Kushal Dave

Book Project Manager: Shagun Saini

Senior Editor: Rakhi Patel

Technical Editor: K Bimala Singha

Copy Editor: Safis Editing

Proofreader: Safis Editing

Indexer: Tejal Daruwale Soni

Production Designer: Ponraj Dhandapani

DevRel Marketing Coordinators: Namita Velgekar and Nivedita Pandey

First published: February 2024

Production reference: 2120124

Published by Packt Publishing Ltd.

Grosvenor House

11 St Paul’s Square

Birmingham

B3 1RB, UK

ISBN 978-1-83763-197-1

www.packtpub.com

To my wife, Luciana Gonçalo Balardini Camillo, for being my wonderful beloved partner who did the most important work of taking care of our beloved children, Mario and Gabriel, while I worked on the book. I love you so much my Linda.

– Alvaro Camillo Neto

Foreword

In the ever-evolving landscape of the web, Angular continues to emerge as a beacon of innovation and efficiency, in a continual era of renaissance, and I am thrilled to introduce you to a comprehensive guide authored by a true enthusiast and expert, Alvaro.

This book is a testament to Alvaro’s tireless efforts to share his knowledge in the most exciting and up-to-date manner possible. Whether you are a seasoned developer seeking to sharpen your skills or a newcomer eager to dive into the world of Angular, this guide promises to be your trusted companion.

So, embark on this adventure with this book as your guide. May the knowledge within these pages inspire you and empower your journey into the universe of web development, with batteries included for this awesome JavaScript framework, which will always have a module and patterns for what you need.

Happy coding!

William Grasel (https://www.linkedin.com/in/willgm/?originalSubdomain=br

)

Principal Software Engineer, Stone Inc

With great excitement and admiration, I write this foreword for my dear friend Alvaro’s book, Angular Design Patterns and Best Practices. For anyone familiar with the Angular framework and seeking to elevate their skills and projects, this book is an invaluable resource.

Alvaro, a Google Developer Expert in Angular and a friend, has poured his wealth of knowledge and practical experience into this comprehensive guide. In Part 1, Reinforcing the Foundations, he skilfully navigates essential topics, starting by reinforcing the foundations of Angular development by delving into project setup, application organization, TypeScript patterns, and service implementation, including the Singleton pattern.

Then, Part 2, Leveraging Angular’s Capabilities equips you with advanced techniques to handle user input through forms, enhance backend integration through the Interceptor pattern, and master reactivity with RxJS. This section empowers developers to create dynamic and interactive experiences for their users.

In the final stretch, that is, Part 3, Architecture and Deployment, Alvaro delves into designing applications for testability, exploring the possibilities of micro-frontends with Angular elements, and sharing best practices for deployment. This part lays the groundwork for robust, scalable, and maintainable applications.

Finally, the Angular Renaissance chapter paints a vibrant picture of the future of modern Angular applications, highlighting the latest advancements and trends shaping the framework. This glimpse into the future inspires and motivates developers to stay ahead of the curve and continually improve their craft.

Alvaro’s writing style is clear, concise, and engaging. He seamlessly blends theoretical concepts with practical examples, making even the most complex topics easily understandable. Additionally, his passion for Angular shines through every page, further igniting your desire to delve deeper into the framework’s capabilities.

So, buckle up, fellow Angular enthusiast, and prepare to embark on a journey of knowledge and growth. With Alvaro as your guide, you’ll be crafting elegant, robust, and future-proof Angular applications in no time.

Happy coding!

Loiane Groner

Published Author and Vice-President – Software Development at CitiBank

Contributors

About the author

Alvaro Camillo Neto is a software engineer, speaker, and instructor in Brazil. He has worked in the technology industry for over 10 years and is dedicated to the development of business solutions at a large company. Alvaro is a technology enthusiast, and he sees knowledge sharing as an opportunity to help the community that helped him so much and the best way of learning. He believes in technology as a tool to empower people. He has performed at small meetups and large events, focusing on the themes of developing web solutions. He also shares knowledge on his blog (https://alvarocamillont.dev/

) and participates in the organization of AngularSP.

About the reviewer

Anu Nagan G has worked at various corporate organizations, starting at a SaaS startup (GenDeep) and moving on to midsize (GAVS) and Fortune 500 companies (DXC). There, he had various roles, such as technical product manager, full stack product lead (in Angular, Java, Python, and AWS), and delivery lead, respectively, in his 10.3 years of tenure. Currently, he is with Bounteous as a technical manager, leading global delivery projects such as migrating legacy WordPress apps to Adobe AEM. Prior to that, he led parallel projects, such as the advanced AI and analytics product CortexAI, clinical mobile app development, and Salesforce automation into B2B business. He previously contributed to various AIOps products, such as ZIF and Gcare. He is an avid reader and cinephile, loves to play guitar, and makes short films with his friends.

I would like to thank my wife and daughter, A Chekhov H, who celebrated her first birthday on 21 December, 2023.

Table of Contents

Preface

Part 1: Reinforcing the Foundations

1

Starting Projects the Right Way

Technical requirements

Why choose Angular?

Batteries included

Google support

Community

Tooling

What technologies are present in the ecosystem?

TypeScript

RXJS

Karma and Jasmine

Webpack

Configuring your development environment

VS Code

VS Code settings

Fira Code font and ligatures

Standardizing the extensions and settings in the project

Angular DevTools

Starting an Angular project

Project structure

Using the Angular CLI for your productivity

ng add

ng update

ng serve

ng build

ng deploy

ng generate

Summary

2

Organizing Your Application

Technical requirements

Organizing the application with Angular modules

declarations

providers

imports

exports

The first module – AppModule

What is the difference between Angular and JavaScript modules?

Modules type

Avoiding anti-pattern – single module app

Optimizing the usage of common modules – the SharedModule pattern

Improving the size of your app – lazy loading

Summary

3

TypeScript Patterns for Angular

Technical requirements

Creating classes and types

Primitive and basic types

Classes

Interfaces

Type aliases

When to use classes, interfaces, or types

Creating methods and functions

Working with null values

Decreasing verbosity – type inference

Validating types – type guards

Using a better alternative to the any type

Summary

4

Components and Pages

Technical requirements

Creating components

Communication between components – inputs and outputs

Best practice – using the TrackBy property

Separating responsibilities – Smart and Presentation components

Communication from the child component – using @Output

Propagating events from nested components

Summary

5

Angular Services and the Singleton Pattern

Technical requirements

Creating services

Understanding the dependency injection pattern

Using the inject() function

Communication between components using services

REST API consumption

Summary

Part 2: Leveraging Angular’s Capabilities

6

Handling User Inputs: Forms

Technical requirements

Template-driven forms

Reactive forms

Data validation

Custom validations

Typed reactive forms

Summary

7

Routes and Routers

Technical requirements

Routes and navigation

Defining an error page and title

Dynamic routes – wildcards and parameters

Securing routes – guards

Optimizing the experience – Resolve

Summary

8

Improving Backend Integrations: the Interceptor Pattern

Technical requirements

Attaching the token to the request with an interceptor

Changing the request route

Creating a loader

Notifying success

Measuring the performance of a request

Summary

9

Exploring Reactivity with RxJS

Technical requirements

Observables and operators

Handling data – transformation operators

Another way to subscribe – the async pipe

Connecting information flows – high-order operators

Optimizing data consumption – filter operators

How to choose the correct operator

Summary

Part 3: Architecture and Deployment

10

Design for Tests: Best Practices

Technical requirements

What to test

Service tests

Fixing the tests and understanding TestBed

Component testing

E2E tests with Cypress

Summary

11

Micro Frontend with Angular Elements

Technical requirements

Micro frontend – concepts and application

When to use a micro frontend

When not to use a micro frontend project

Slicing your application into micro frontends

Creating a micro frontend application with standalone components

Preparing a page to be loaded by the base application

Dynamically loading micro frontends

Summary

12

Packaging Everything – Best Practices for Deployment

Technical requirements

Deploying the backend

Differentiating environments

Preparing the production bundle

Mounting a Docker image with Nginx

Deploying a page to Azure Static Web Apps

Summary

13

The Angular Renaissance

Technical requirements

Updating your project with the Angular CLI

Using a new way to create templates – control flow

Improving the user experience using the defer command

Creating transitions between pages – view transactions

Simplifying application states – Angular Signals

Summary

Index

Other Books You May Enjoy

Preface

The Angular framework has been helping development teams since 2009, with a robust structure and practically everything a web application needs. Angular, with its batteries included philosophy, has mechanisms for state management, route administration, and the injection of dependencies among other tools for you to create the most incredible experiences for your users.

This book aims to help you navigate this incredible list of features and learn how to orchestrate it for you and your team to get the most out of Angular and its entire ecosystem.

We will discover what types of patterns exist in the framework and what lessons we can learn from these patterns to apply to our applications.

We will also explore Angular development and architecture best practices based on its documentation, and community advice around the Angular ecosystem.

Angular is widely used by companies of different sizes and sectors. The company that sponsors this open source framework, Google, has thousands of internal applications that use Angular, guaranteeing great stability, which is one of the biggest reasons for using it.

There is a huge demand for developers who have mastered Angular and architects who can organize and get the best out of Angular, and the framework is currently in its best form, dubbed by the community as the Angular Renaissance.

Who this book is for

This book is for frontend developers and architects with experience in Angular or any other web framework who want to delve into the best that Angular can offer.

The main personas that this book is aimed toward are the following:

Developers who already work with Angular and want to be more productive in delivering their tasks

Technical leaders who want to bring best practices to their teams to increase the quality and productivity of their deliveries

Software architects who want to explore the possibilities that Angular can offer applications and thus design resilient and secure systems

What this book covers

Chapter 1

, Starting Projects the Right Way, reinforces the fundamentals of Angular, its principles, and how to configure your project and development environment to be as productive as possible.

Chapter 2

, Organizing Your Application, explores best practices in organizing an Angular project and how to optimize your application’s performance by lazy loading Angular modules.

Chapter 3

, TypeScript Patterns for Angular, delves into the framework’s base language, TypeScript, and helps you understand why it was chosen by the Angular team and how we can apply to our projects.

Chapter 4

, Components and Pages, works with the base element of the framework, the component, and how we can structure our project to create concise and efficient applications.

Chapter 5

, Angular Services and the Singleton Pattern, analyzes Angular services to separate business logic from presentation logic and best practices for communicating with the backend.

Chapter 6

, Handling User Inputs: Forms, is where we will study the main way users interact with our applications, through forms, and how we can create reactive and easy-to-maintain forms.

Chapter 7

, Routes and Routers, is where we will work with Angular’s routing mechanism and how to manage our applications’ routes in a secure and optimized way.

Chapter 8

, Improving Backend Integrations: the Interceptor Pattern, is where we will apply the Interceptor design pattern to common tasks when dealing with backend communication, such as token management and user notification.

Chapter 9

, Exploring Reactivity with RxJS, delves deeper into the RxJS library and how we can make the most of it for managing information flows and interactions in our projects.

Chapter 10

, Design for Tests: Best Practices, discusses automated testing and how to prepare our project for this process, as well as exploring unit testing with the Jasmine and Karma libraries and end-to-end testing with the open source tool Cypress.

Chapter 11

, Micro Frontend with Angular Elements, explores the micro frontend architecture and discusses when to use it and how to implement it in Angular using the Angular Elements library.

Chapter 12

, Packaging Everything: Best Practices for Deployment, looks at the best practices for building and deploying our Angular applications to cloud environments. Using an example project, we will explore the Microsoft Azure cloud.

Chapter 13

, The Angular Renaissance, explores how to keep ourselves and our applications up to date with the constant evolution of Angular and looks at incredible features such as Angular Signals, standalone components, and lazy loading components using the defer instruction.

To get the most out of this book

You will need to have a basic understanding of HTML, CSS, and JavaScript and how a web application works.

Download the example code files

You can download the example code files for this book from GitHub at . If there’s an update to the code, it will be updated in the GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/

. Check them out!

Conventions used

There are a number of text conventions used throughout this book.

Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: In this test case, we don't need to worry about the login because the beforeEach function performs this function and we work directly on the form.

A block of code is set as follows:

describe('My First Test', () => {

  it('Visits the initial project page', () => {

    cy.visit('/')

    cy.contains('app is running!')

  })

})

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

  type=submit

  class=w-full rounded bg-blue-500 px-4 py-2 text-white

  [disabled]=loginForm.invalid

  [class.opacity-50]=loginForm.invalid

  data-cy=submit

>

  Login

Any command-line input or output is written as follows:

ng test

Bold: Indicates a new term, an important word, or words that you see onscreen. For instance, words in menus or dialog boxes appear in bold. Here is an example: Select the desired browser and click on Start E2E Testing and we will have the test execution interface.

Tips or important notes

Appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: If you have questions about any aspect of this book, email us at [email protected]

and mention the book title in the subject of your message.

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata and fill in the form.

Piracy: If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected]

with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.

Share Your Thoughts

Once you’ve read From PHP to Ruby on Rails, we’d love to hear your thoughts! Please click here to go straight to the Amazon review page

for this book and share your feedback.

Your review is important to us and the tech community and will help us make