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

Creating a micro frontend application with standalone components

To exemplify the use of the micro frontend architecture in our gym diary, we will create a form to define new exercises for our users. Let’s create another Angular project, simulating a new team that will specifically take care of this functionality. In your operating system’s command line, use the following command:

ng new gym_exercises --skip-git --standalone --routing false --style css

We learned about the ng new command in Chapter 1, Starting Projects the Right Way, but here we are using some parameters that we haven’t seen before. We are using the skip-git parameter because, in this example, we are creating it in the same Git project (which already has the gym-diary and gym-backend projects). The routing parameter is set to false because our project will be loaded in the diary application route, and the style parameter is set to CSS so the Angular CLI does not need to ask what type of styling...