Angular Module With Example

Introduction:

For Better understanding, before directly jump into the angular module, let me provide few lines about what is an angular and angular application in simple words.

Brief of Angular:                                                     

  • Angular is a framework to develop rich client side application for the web.
  • It is an open source java script framework designed by google.
  • Google change the name from Angular.js to Angular because the structure of the application varies entirely.
  • Application developed using angular framework are referred to as angular application

Brief of Angular Application:

  • Angular Application is a collection of Module.
  • The Execution of the angular application starts from the module specified in the main.ts file.
  • ts file is written in typescript language.

Example:

 

 

Brief of 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, module is defined in the typescript file which is having the decorator @NgModule.
  • NgModuleis a function that takes a single metadata object, whose properties such as declarations, export, import, bootstrap, and providers will describe about the module.

 

Example:

Pictorial representation of NgModule decoration:

 

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

  • declarations – the view classesthat belong to this module. Mainly, Angular has three kinds of view classes: componentsdirectives, 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 other app views. Only the root module should set this bootstrap property.

 

Code Representation of NgModule Decoration:

 

 

Code Explanation:

  • In Angular we have some of the libraries such as ‘@angular/core’, ‘@angular/platform-browser’ and we can install them with the npmpackage manager.
  • All the angular libraries are begins with @angular prefix
  • Many Angular libraries are modules (such as FormsModuleHttpModule, 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’s can be used for the following purpose:

  • Declare which components, directives, and pipes belong to the module.
  • Make some of those classes public so that 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 project?

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

 

Conclusion:

 

  • NgModule will be decorated above the class, once it has 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 , angular app we will have a  NgModule Class called AppModule  that is presented in 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

 

Thanks

Karthik.

 

 

56 total views, 6 views today

Leave a Reply

Your email address will not be published. Required fields are marked *