Back to Angular Course

What are Angular Modules?

Angular Modules, defined by the @NgModule decorator, group related code into functional sets. They provide a way to manage dependencies and organize your application into neat, logical units.

Key Purposes of Angular Modules

• Modularity and Organization: Angular modules help break down an application into smaller, manageable pieces. This modular approach makes it easier to manage and scale your codebase.
• Seperation of Concerns By grouping related components, services, directives, and pipes into modules, you separate different parts of your application, making it cleaner and more maintainable.
• Lazy Loading Modules enable lazy loading, which means loading specific parts of your application only when they are needed. This improves initial load time and overall performance.
• Dependency Management: Angular modules provide a clear structure for dependency injection, ensuring that dependencies are declared once and used consistently throughout your application.
• Reusability: Modules promote code reusability. Shared modules can be imported across different parts of your application, reducing redundancy and enhancing consistency.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MatDialogModule } from '@angular/material/dialog';
import { MatSelectModule } from '@angular/material/select';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { SortBySalaryPipe } from './pipes/sort-by-salary.pipe';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { FooterComponent } from './components/footer/footer.component';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './components/home/home.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { CreateEmployeeFormComponent } from './components/create-employee-form/create-employee-form.component';
import { FormsModule } from '@angular/forms';
import { UpdateEmployeeDialogComponent } from './components/update-employee-dialog/update-employee-dialog.component';
import { ContactUsComponent } from './components/contact-us/contact-us.component';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatTableModule } from '@angular/material/table';
import { BubblePaginationDirective } from './directives/bubble-pagination.directive';
import { MatSortModule } from '@angular/material/sort';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatDialogActions } from '@angular/material/dialog';
import { ConfirmDialogComponent } from './components/confirm-dialog/confirm-dialog.component';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { provideHttpClient } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    SortBySalaryPipe,
    DashboardComponent,
    FooterComponent,
    HomeComponent,
    NavbarComponent,
    CreateEmployeeFormComponent,
    UpdateEmployeeDialogComponent,
    ContactUsComponent,
    BubblePaginationDirective,
    ConfirmDialogComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatDialogModule,
    MatSelectModule,
    CommonModule,
    FormsModule,
    MatPaginatorModule,
    MatTableModule,
    MatSortModule,
    MatTooltipModule,
    MatDialogActions,
    MatSnackBarModule

  ],
  providers: [provideHttpClient()],
  bootstrap: [AppComponent]
})
export class AppModule { }

• NgModule Decorator: Modules are defined using the @NgModule decorator, which takes a metadata object specifying module configuration.
• Imports: Other modules that this module depends on are listed in the imports array.
• Providers: Services available for dependency injection within the module are specified in the providers array.
• Declarations: Components, directives, and pipes that belong to the module are declared within the declarations array.
• exports: The subset of declarations that should be visible and usable in the component templates of other NgModules.
• Bootstrap Component: The main application view, called the root component, which hosts all other application views. Only the root NgModule should set the bootstrap property.

Takeaways

• Root Module: Every Angular application has at least one root module that bootstraps the application.
• Feature Modules: Used to encapsulate specific features, improving modularity and enabling lazy loading.
• Shared Modules: Contain common components, directives, and pipes that are used across multiple modules.