Beginners Guide For Angular Module

Introduction

For better understanding, before directly jumping into the Angular module, let me provide a few lines about what is Angular and what are Angular application.

Angular                                                   

• Angular is a framework to develop rich client-side applications for the web.
• It is an open source JavaScript framework designed by Google.
• Google changed the name from Angular.js to Angular because the structure of the application varies entirely.
• Applications developed using Angular framework are referred to as Angular applications.

 Angular Application

• An Angular application is a collection of modules.
• The execution of an Angular application starts from the module specified in the main.ts file.
• .ts files are written in TypeScript language.

Example

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

Angular Module

• In general, Module is a collection of business/domain functions designed to achieve a single purpose. All the functions within module must work together cohesively to achieve the objective which is defined for the module.
• In Angular, a module is defined in the TypeScript file which is having the decorator @NgModule.
• NgModule is a function that takes a single metadata object, whose properties such as declarations, export, import, bootstrap, and providers, describe the module.

Example

Pictorial representation of NgModule decoration -

In the above diagram, @NgModule directive takes a single metadata object whose properties describe the module.

• declarations - the View classes that belong to this module. Mainly, Angular has three kinds of View classes: components, directives, and pipes.
• imports- other modules whose exported classes are needed by component templates declared in this.
• bootstrap- the main application View called the root component, that hosts all the other app Views. Only the root module should set this bootstrap property.

Code Representation of NgModule Decoration

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
//Newly created and referenced here
import { StudentComponent } from './student/app.student'

@NgModule({

    //Here Add all  your Modules used in project
    imports: [BrowserModule,HttpModule],

    //Here Add all your component,directives and pipes used in project

    declarations: [AppComponent, StudentComponent,directive1,directive,pipe1,pipe2,],

    //Here the component to be bootstrapped or start
    bootstrap: [AppComponent]
})
export class AppModule { }

Code Explanation

• In Angular, we have some of the libraries such as '@angular/core', '@angular/platform-browser' and we can install them with the npm package manager.
• All the Angular libraries begin with @angular prefix.
• Many Angular libraries are modules (such as - FormsModule, HttpModule, and RouterModule.
• Modules can also add services to the application. Such services might be internally developed, such as the application logger. Services can come from outside sources, such as the Angular Router and Http client.

Additional Note

We can also say that Metadata can be used for the following purposes.

• Declare which components, directives, and pipes belong to the module.
• Make some of those classes public so that the other component templates can use them.
• Import other modules with the components, directives, and pipes needed by the components in this module.
• Provide services at the application level that any application component can use.

Default Location: Where app.module.ts is located in the project?

After installation of Angular, Module class will be under the project->src-> app.module.ts.  Here is SnagIt.

Conclusion

• NgModule decorates the above class. Once it is decorated, then the normal class will become an NgModule class.
• Every application should have at least one Module which is the root module that you bootstrap to launch the application.
• And by default, Aangular app we will have an NgModule class called AppModule that is presented in the module.ts file.
• You can call it anything you want. The conventional name is AppModule.

Hope the above information was helpful. Kindly let me know your thoughts or feedbacks.