Modules in Angular

Modules in Angular

Modules are simply containers where you can group various building blocks of Angular applications like components, directives, pipes, and services.

The Modular design helps to keep the Separation of concerns. It makes it easy to maintain the code and reuse the code.

The Angular itself is divided into the different Core modules, that you can import in your application to implement core functionalities. 

For example, FormsModule, HttpClientModule, Router Module, are some core modules in Angular.

In Angular, you can create a module using the @NgModule decorator.

Note: Angular modules can import the functionalities exported from other modules and also, they can export its own functionality to the other modules.

Every Angular application must have at least one root module, which is named as AppModule by the Angular CLI created project. 

A small application can be build using a single module but applications, where you are providing various features, can be divided into multiple modules.

app.module.ts

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

import { AppComponent } from './app.component';

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

Let's understand the metadata (@NgModule Decorator) for the Module 

Declarations Array:


In this array, we declare the components, directives, pipes that belong to this module.
This array contains only those elements which are part of this module, No element should be declared in this array if it is imported from some other module.

Note: The services that we create in the module, are not included in this array, as we want our services to be available globally, we will mention them in the Providers array which has Global scope.

Imports Array:

The Imports array contains the other modules whose exported classes are needed in the components of this module.

Exports Array:

The Exports array contains components, pipes, directives of this module that you want to export so that other modules can use them.


Providers Array:

The Providers array contains the services that you want to provide to the entire application. Any services specified in the providers array is added to the global collection of services.

These services can be injected into the components using dependency Injection.


Bootstrap:

Angular needs one component (main component) to be loaded first, and you need to tell Angular which component is the starting point of execution.

This bootstrap array contains the main component that needs to be loaded first or the root component of the module must be specified here.

Note: Only the root module can specify the bootstrap array, Inner modules (submodules) will keep this array as blank.

Create your own module in Angular

As your application grows, it's always a best practice to divide your application into multiple modules so that each module can be easily maintainable, reusable, and testable.

If you create your project using Angular CLI, one root module is created by default i.e AppModule. 

We can create our own feature module, that will collaborate with the root module or other feature modules through the services, components, and directives.

you can generate a feature module using the command:

ng generate module Dashboard

or 

ng g m Dashboard    ----- Shortcut syntax

The above command will create a folder with the name "dashboard".