Angular Modules
- Angular modules are an integral part of an Angular application.
- In the simplest terms, a module is a container for a specific set of related components, directives, services, and other code that helps organize and manage your Angular application.
- Think of it as a way to group and structure your code for better maintainability and scalability.
To define a module we use @NgModule as follows:
Example:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { FormComponentComponent } from './form-component/form-component.component';
@NgModule({
declarations: [
AppComponent,
FormComponentComponent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
At the above NgModule needs to be imported as follows:
import { NgModule } from '@angular/core';
Structure of NgModule:
- declarations: It is an array of components where the reference of all components within the application is included by importing them first.
- imports: It is the array of modules where all the modules required by the application are included by importing them at the top.
- providers: Here all the services that are created are included.
- bootstrap: This includes the main component of the application.