Book Image

Angular Design Patterns and Best Practices

By : Alvaro Camillo Neto
2 (1)
Book Image

Angular Design Patterns and Best Practices

2 (1)
By: Alvaro Camillo Neto

Overview of this book

Single page applications (SPAs) have become the standard for most web experiences. Angular, with its batteries-included approach, has emerged as a powerful framework for simplifying the development of these interfaces by offering a comprehensive toolbox. This book guides you through the Angular ecosystem, uncovering invaluable design patterns and harnessing its essential features. The book begins by laying a strong foundation, helping you understand when and why Angular should be your web development framework of choice. The next set of chapters will help you gain expertise in component design and architecting efficient, flexible, and high-performing communication patterns between components. You’ll then delve into Angular's advanced features to create forms in a productive and secure way with robust data model typing. You'll also learn how to enhance productivity using interceptors to reuse code for common functionalities, such as token management, across various apps. The book also covers micro frontend architecture in depth to effectively apply this architectural approach and concludes by helping you master the art of crafting tests and handling errors effortlessly. By the end of this book, you'll have unlocked the full potential of the Angular framework.
Table of Contents (19 chapters)
1
Part 1: Reinforcing the Foundations
7
Part 2: Leveraging Angular’s Capabilities
12
Part 3: Architecture and Deployment

Securing routes – guards

So far, we’ve seen how to take data through the route to determine the behavior of a page component. However, the routing created in Angular is versatile and also allows you to shape the customer’s journey by conditioning resources based on a business rule.

To illustrate this feature, we are going to create a login screen with a simplified authentication mechanism. To create the components, we are going to use the Angular CLI.

At the command prompt of your operating system, use the following commands:

ng g m login --routing
ng g c login
ng g s login/auth

The first command creates a Login module with the routes file. The second creates the login page component and, finally, we have the service that will manage the interaction with the authentication of our backend.

In the Login module, we will configure the dependencies of the new module:

. . .
@NgModule({
  declarations: [
    LoginComponent...