Modules in Angular

Modules in Angular

In Angular, a module is a way to organize an application into cohesive blocks of functionality.

👉 Technically, a module in Angular is defined using the @NgModule decorator.
It tells Angular how to compile and launch your application.

Key Points about Angular Modules:

  1. Root Module (AppModule)
    • Every Angular app has at least one module, called the root module (AppModule).
    • It bootstraps (starts) the application.
  2. Feature Modules
    • Additional modules that organize related functionality (e.g., UserModule, AdminModule).
    • They help make the app more maintainable and scalable.
  3. Shared Modules
    • Used for common components, directives, and pipes that are reused across multiple modules.
  4. Core Module
    • Typically holds singleton services that should only be loaded once (like authentication or logging).

Structure of a Module

A module is defined using the @NgModule decorator, which has several important properties:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [   // Components, directives, pipes that belong to this module
    AppComponent
  ],
  imports: [        // Other modules whose features are needed
    BrowserModule,
    FormsModule
  ],
  providers: [],    // Services available in this module
  bootstrap: [AppComponent]  // The root component to start the app
})
export class AppModule { }

Why use Modules?

✅ Organize code into smaller, manageable units
✅ Enable lazy loading (load code only when needed)
✅ Encourage reusability of components and services
✅ Provide dependency injection scopes

Leave a Reply