Yogesh Chauhan's Blog

Introduction to Angular modules Part 1: NgModule metadata

in Angular on May 9, 2020

Introduction to Angular modules: Part 1

Angular apps are modular and Angular has its own modularity system called NgModules.

Modular programming is a software design technique that emphasizes separating the functionality of a program into independent, interchangeable modules, such that each contains everything necessary to execute only one aspect of the desired functionality.

NgModules are containers for a cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities.

They can contain components, service providers, and other code files whose scope is defined by the containing NgModule.

They can import functionality that is exported from other NgModules, and export selected functionality for use by other NgModules.

Every Angular app has at least one NgModule class, the root module.

The root module is conventionally named AppModule and resides in a file named app.module.ts.

You launch your app by bootstrapping the root NgModule.

While a small application might have only one NgModule, most apps have many more feature modules.

The root NgModule can include child NgModules in a hierarchy of any depth.

NgModule metadata

An NgModule is defined by a class decorated with @NgModule().

The @NgModule() decorator is a function that takes a single metadata object, whose properties describe the module.

The most important properties are:

declarations: The components, directives, and pipes that belong to this NgModule.

exports: The subset of declarations that should be visible and usable in the component templates of other NgModules.

imports: Other modules whose exported classes are needed by component templates declared in this NgModule.

providers: Creators of services that this NgModule contributes to the global collection of services; they become accessible in all parts of the app. You can also specify providers at the component level, which is often preferred.

bootstrap: The main application view, called the root component, which hosts all other app views. Only the root NgModule should set the bootstrap property.

Here's a simple root NgModule definition.


// src/app/app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Note: AppComponent is included in the exports list here for illustration; it isn't actually necessary in this example. A root NgModule has no reason to export anything because other modules don't need to import the root NgModule.

Next

Introduction To Angular Modules Part 2: NgModules And Components

Introduction To Angular Modules Part 3: NgModules Vs JavaScript Modules And Angular Libraries

Credit: Angular.io


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
WordPress: How to print ACF array field values?WordPressAttributes and Properties in JavaScript and HTMLHTMLObservation of Human Behavior [Shopping Observation Example]MiscellaneousHow to make a web page look good on any device?HTMLCurrencyPipe in Angular 9 with ExamplesAngularHow to redirect or load a new document using JavaScript?JavaScript