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 Application

Example

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

Angular Module

Example

Pictorial representation of NgModule decoration -

Angular

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

Code Representation of NgModule Decoration

  1. import { NgModule } from '@angular/core';
  2. import { BrowserModule } from '@angular/platform-browser';
  3. import { AppComponent } from './app.component';
  4. //Newly created and referenced here
  5. import { StudentComponent } from './student/app.student'
  7. @NgModule({
  9. //Here Add all your Modules used in project
  10. imports: [BrowserModule,HttpModule],
  12. //Here Add all your component,directives and pipes used in project
  14. declarations: [AppComponent, StudentComponent,directive1,directive,pipe1,pipe2,],
  16. //Here the component to be bootstrapped or start
  17. bootstrap: [AppComponent]
  18. })
  19. export class AppModule { }

Code Explanation

Additional Note

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

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.

Angular

Conclusion

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