18 April 2020

Angular Module

         
   In Angular, a module is a mechanism to group components, directives, pipes and services that are related, in such a way that can be combined with other modules to create an application.In case you are developing a shopping  website Admin, User, Employee, Guest and Service provider become part of a module.

To define module, we can use the NgModule. When you create a new project using the Angular CLI command, the ngmodule is created in the app.module.ts file by default and it looks as follows.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Declaration:
Declaration is one part in Module. It is an array of components created by user. If any new component gets created by user, it will be imported first and the reference will be included in declarations as shown below

  declarations: [
    AppComponent
  ]

Imports:
Imports is one part in Module. it is an array of modules required to be used in the application. It can also be used by the components in the Declaration array. For example, right now in the @NgModule we see the Browser Module and AppRouting Module imported. it will look like below.

  imports: [
    BrowserModule,
    AppRoutingModule
  ]

Providers:
This will include the services created.

Bootstrap:
This includes the main app component for starting the execution. it will look like below. in below code AppComponent is the starting componet for this module.

  bootstrap: [AppComponent]

No comments:

Post a Comment