3. Angular module structure

Angular is a popular framework for building web applications. It follows a modular architecture that helps in organizing and managing the codebase effectively. Angular has its own modularity system called NgModules. NgModules in Angular are containers that group related components, directives, services, and other features into cohesive units. They provide a way to organize and separate concerns within an application. They can import functionality that is exported from other NgModules, and export selected functionality for use by other NgModules.

Every Angular application has at least one NgModule class, the root module, which is conventionally named AppModule and resides in a file named app.module.ts. This must be present for bootstrapping the application on launch.

1. A brief look at the App Module

When you use the Angular CLI command ng new to generate an app, the default AppModule looks like the following:

/* JavaScript imports */

import { BrowserModule } from ‘@angular/platform-browser’;

import { NgModule } from ‘@angular/core’;

import { AppComponent } from ‘./app.component’;

/* the AppModule class with the @NgModule decorator */

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

After the import statements, is a class with the @NgModule decorator.

      The @NgModule decorator identifies AppModule as an NgModule class. @NgModule takes a metadata object that tells Angular how to compile and launch the application. The metadata object identifies the module’s own components, directives, and pipes, making some of them public, through the exports property, so that external components can use them. @NgModule can also add service providers to the application dependency injectors.

NgModule metadata does the following:

• Declares which components, directives, and pipes belong to the module.
• Makes some of those components, directives, and pipes public so that other module’s component templates can use them.
• Imports other modules with the components, directives, and pipes that components in the current module need.
• Provides services that other application components can use.

2. The declarations array

The module’s declarations array tells Angular which components belong to that module. As you create more components, add them to declarations.

The declarations array only takes declarables. Declarables are components, directives and pipes. All of a module’s declarables must be in the declarations array. Declarables must belong to exactly one module. The compiler emits an error if you try to declare the same class in more than one module. 

An example of what goes into a declarations array follows:

declarations: [

  YourComponent,

  YourPipe,

  YourDirective

],

3. The imports array

The module’s imports array appears exclusively in the @NgModule metadata object. It tells Angular about other NgModules that this particular module needs to function properly.

imports: [

  BrowserModule,

  FormsModule,

  HttpClientModule

],

This list of modules are those that export components, directives, or pipes that component templates in this module reference.

4. The providers array

The providers array is where you list the services the application needs. It is the set of injectable objects that are available in the injector of this module. Dependencies whose providers are listed here become available for injection into any component, directive, pipe or service that is a child of this injector.

providers: [UserService]

Quiz:

What is the purpose of the AppModule in an Angular application?

a) It defines the main component of the application.

b) It handles HTTP requests and responses.

c) It imports and configures other modules.

d) It provides routing for the application.

Which decorator is used to denote an Angular module?

a) @Module

b) @module

c) @ngModule

d) @NgModule

What is the purpose of the declarations array?

a) It helps in importing other modules that this particular module needs to function properly.

b) It tells Angular which components belong to that module.

c) It tells Angular which services the application needs.

d) It provides routing for the application.

What is the purpose of the imports array?

a) It helps in importing other modules that this particular module needs to function properly.

b) It tells Angular which components belong to that module.

c) It tells Angular which services the application needs.

d) It provides routing for the application.

What is the purpose of the providers array?

a) It helps in importing other modules that this particular module needs to function properly.

b) It tells Angular which components belong to that module.

c) It tells Angular which services the application needs.

d) It provides routing for the application.