Modules

As our applications scale and grow, there will be a time when we need to organize our code better and make it sustainable and reusable. Modules are a great way to accomplish these tasks, so let's look at how they work and how we can implement them in our application.

A module works at a file level, where each file is the module itself, and the module name matches the filename without the .ts extension. Each member marked with the export keyword becomes part of the module's public API. Consider the following module that is declared in a my-service.ts file:

export class MyService {
    getData() {}
}

To use the preceding module and its exported class, we need to import it into our application code:

import { MyService } from './my-service';

The ./my-service path is relative to the location of the file that imports the module. If the module exports more than one artifact, we place them inside the curly braces one by one, separated with a comma:

export class...

Summary

It was a long read, but this introduction to TypeScript was necessary to understand the logic behind many of the most brilliant parts of Angular. It gave us the chance to introduce the language syntax and explain the rationale behind its success as the syntax of choice for building the Angular framework.

We reviewed the type architecture and how we can create advanced business logic when designing functions with various alternatives for parameterized signatures. We even discovered how to bypass scope-related issues using the powerful arrow functions. Probably the most relevant part of this chapter encompassed our overview of classes, methods, properties, and accessors and how we can handle inheritance and better application design through interfaces. Modules and decorators were some other significant features we explored in this chapter. As we will see very soon, having sound knowledge of these mechanisms is paramount to understanding how dependency injection works in Angular...

Introducing Angular modules

Angular modules are containers for a particular block of code that adheres to the same functionality. An Angular module is dedicated to an application domain, such as orders or customers for an e-shop application, or a user workflow, such as order checkout or user registration. Generally, it addresses a particular set of capabilities that an application can have.

The main advantage of the Angular module architecture is that it scales better and is easier to test. If we think of a module as a particular feature of an application, it allows us to organize our Angular application so that we can develop a particular piece of functionality independently of the others. It dramatically enhances team management in large organizations where each development team can work in a separate feature. Features can gradually be deployed, ensuring the seamless operation of our application.

Angular modules are different from JavaScript modules due to the context in...

Creating our first module

When creating a new Angular application, the first step is to define the different features our application needs. We should remember that each one should make sense on its own in isolation from the others. Once we’ve defined the required features, we will create a module for each. Each module will then be filled with the Angular artifacts that shape the feature it represents. Always remember the principles of encapsulation and reusability when defining your feature set.

If we wanted to create an e-shop application, we would typically need a module to manage the stock of our products. To create a new module in an Angular application, we use the generate command of the Angular CLI, passing the name of the module as a parameter:

ng generate module products

The preceding command will create a products folder inside the src\app folder of our Angular workspace. The products folder is the container for Angular artifacts...

Group application features into modules

Each Angular module represents a particular feature of an Angular application. The way these feature modules are added to the application depends on a business’s needs. In this section, we will investigate three different ways:

• Adding modules in the main application module
• Adding modules to another feature module
• Grouping feature modules by type

In the following sections, we will explore each way in more detail.

Add a module in the main module

We have already learned how to create a new Angular module for our application using the Angular CLI. Creating an Angular module does not make it automatically available to the application. It is our responsibility to register the new module with the rest of the application using the main application module:

1. Open the app.module.ts file and add a new import statement to import ProductsModule:

   import { NgModule } from '@angular/core&apos...

Leveraging Angular built-in modules

We have already learned that the Angular framework contains a rich collection of first-party libraries that can help us during the development of an Angular application. The functionality of each library is exposed through an Angular module. We need to import these modules into our applications to start using their functionality, as with any other module in Angular. Below are some of the most widely used modules of the Angular framework:

• BrowserModule: This is used to run Angular applications in the browser and must be imported only once in an Angular application.
• CommonModule: This contains specific Angular artifacts that support the Angular template syntax and enrich our HTML templates. Typical examples include directives for looping or displaying HTML content conditionally and applying CSS styles in HTML. We will work most of the time with this module in this book.
• FormsModule/ReactiveFormsModule: This allows us to build...

Summary

Angular modules are an essential part of an Angular application. They define the main features of the application and organize them cohesively and efficiently.

We learned the purpose of a module in an Angular application and how different they are from JavaScript modules. We also explored the structure of an Angular module and how Angular uses decorators to configure it.

We also learned the different ways to add a module in an Angular application and how modules communicate with each other over a public API. Finally, we saw how we could group modules according to their features and some of the most widely used Angular built-in modules.

In the next chapter, we will learn more about the functionality that goes into an Angular module and how it can be represented as an Angular component.