Angular Module

An Angular module is a class decorated with the @NgModule decorator. It defines the components, directives, pipes, and services that belong to the module. The @NgModule decorator takes a metadata object that describes the module's structure and configuration.

import { NgModule } from '@angular/core';

@NgModule({
  declarations: [/* Components, Directives, Pipes */],
  imports: [/* Other Modules */],
  exports: [/* Components, Directives, Pipes */],
  providers: [/* Services */],
  bootstrap: [/* Root Component */]
})
export class AppModule { }

Types of Modules

Angular modules can be categorized into two main types:

• **Root Module:** The main module of your application. It's responsible for bootstrapping the app and loading the necessary components.
• **Feature Module:** A module that encapsulates a specific feature or functionality of your app. It can be imported into other modules or the root module.

Creating Modules

To create a new module, you can use the Angular CLI command:

ng generate module my-module

This command will create a new module file named my-module.module.ts in your project's src/app directory.

Module Imports

The imports array in the @NgModule decorator specifies the other modules that this module depends on. This allows you to use components, directives, pipes, and services from imported modules within your current module.

Module Exports

The exports array defines which components, directives, and pipes from this module are available for use in other modules. Only exported elements can be used by other modules.

Module Providers

The providers array is used to register services that are provided by this module. This allows you to inject these services into components and other services within the module.

Module Declarations

The declarations array lists the components, directives, and pipes that are declared within this module. These elements are specific to the module and are not available outside of it.

Bootstrap

The bootstrap array in the @NgModule decorator specifies the root component of your application. Only the root module can have a bootstrap array.

Summary

• Angular modules organize your code into logical units.
• They provide a way to define dependencies between different parts of your application.
• Modules are defined using the @NgModule decorator.
• The imports, exports, providers, and declarations arrays define the structure and configuration of the module.