Angular Modules
Angular modules refer to a place where we can group the components, Pipes, services and directives which are needed for an application. We take the example of NgModule which is created as a default during our project creation.
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { MyfirstcomponentComponent } from './myfirstcomponent/myfirstcomponent.component'; @NgModule({ declarations: [ AppComponent, MyfirstcomponentComponent ], imports: [ BrowserModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Inorder to use the module we need to import it as below.
import { NgModule } from '@angular/core';
The structure is as shown below.
@NgModule({ declarations: [ AppComponent, MyfirstcomponentComponent ], imports: [ BrowserModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] })
It start with @NgModule and contains declaration, imports, provides and bootstrap
- Declarations – reference to the components, directives and pipes are stored.
- Imports – Modules needed for the components are declared here
- Providers- services which are created are declared here, so that to accessed anywhere inside the app.
- Bootstrap – Main application or the root component is declared here.