Modules in Angular
Modules are a great way to organize an application and extend it with capabilities from external libraries.
NgModules consolidate components, directives, and pipes into cohesive blocks of functionality, each focused on a feature area, application business domain, workflow, or common collection of utilities.
Angular libraries are NgModules, such as BrowserModule, FormsModule, HttpClientModule, and RouterModule.
Modules can also add services to the application. Such services might be internally developed, like something you'd develop yourself or come from outside sources, such as the Angular router and HTTP client.
NgModule metadata
An NgModule is defined by a class decorated with @NgModule() decorator. The @NgModule() decorator is a function that takes a single metadata object, whose properties describe the module.
- declarations - declares the components, directives and pipes used in the application.
- exports - the declarations that could be used in the component templates of othermodules.
- imports - the declarations of other modules that could be used in this module.
- providers - the declarations of the singleton services that could be used throughout the application.
- bootstrap - the root module sets the root component that hosts all other app view at the start of the application.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
@NgModule({
declarations: [
AppComponent,
HeaderComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
A module can be any one of the following type:
- Root Module
- Feature Module
- Shared Module
Root Module vs Feature Module
Every Angular app has at least one NgModule class, the root module, which is conventionally named AppModule and resides in a file named app.module.ts. Root Module gets bootstrapped at the start of an Angular Application.
Feature modules are NgModules for the purpose of organizing code.A feature module is focused mainly on a specific application need such as a user workflow, routing, or forms.
While you can do everything within the root module, feature modules help you partition the app into focused areas.
A feature module collaborates with the root module and with other modules through the services it provides and the components, directives, and pipes that it shares.
There are five general categories of feature modules which tend to fall into the following groups:
- Domain feature modules.
- Routed feature modules.
- Routing modules.
- Service feature modules.
- Widget feature modules.
Shared Module
Shared Module comes into play when your application need same features to be implemented at different places. Shared module is mainly used to organize and streamline your code.You can put commonly used directives, pipes, and components into one module and then import just that module wherever you need it in other parts of your app.
NgModules and JavaScript modules
Angular uses both the module system i.e; angular module system as well as the javascript module system all together.
The NgModule system is different from and unrelated to the JavaScript (ES2015) module system for managing collections of JavaScript objects.
In JavaScript each file is a module and all objects defined in the file belong to that module. The module declares some objects to be public by marking them with the export key word. Other JavaScript modules use import statements to access public objects from other modules.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
However NgModules are classes decorated with @NgModule. The @NgModule decorator’s imports array tells Angular what other NgModules the current module needs.
@NgModule({
declarations: [
AppComponent,
HeaderComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
In this way you're using the Angular and JavaScript module systems together. Although it's easy to confuse the two systems, which share the common vocabulary of "imports" and "exports", you will become familiar with the different contexts in which they are used.
Angular libraries
Angular loads as a collection of JavaScript modules. You can think of them as library modules. Each Angular library name begins with the @angular prefix. Install them with the npm package manager and import parts of them with JavaScript import statements.
Resource: https://angular.io
Modules in Angular lets you to organize your code, avoid duplication of same code and keep it maintainable. Share your experiences of how useful you found modules to be.