AngularJS: Introduction to modules

By | November 10, 2018

AngularJS has its own modularity system called NgModules.

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(root module) class, which is named AppModule and resides in a file named app.module.ts. Your app will be launched by bootstrapping the root NgModule.

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 as follows.

  1. declarations: The components, directives, and pipes that belong to this NgModule.
  2. exports: The subset of declarations that should be visible and usable in the component templates of other NgModules.
  3. imports: Other modules whose exported classes are needed by component templates declared in this NgModule.
  4. 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.)
  5. bootstrap: The main application view, called the root component, which hosts all other app views. Only the root NgModule should set the bootstrap property.

The following code will be present in the app.module.ts file.

A root NgModule always has a root component that is created during bootstrap, but any NgModule can include any number of additional components.

Leave a Reply

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