A module is a single unit of implementation of distinct functionalities. Collections of such modules will be used to implement complex applications. Implementing module patterns helps you avoid global collisions of variables and methods. JavaScript encapsulates both private and public methods under a single object by implementing a modular pattern. The modular pattern achieves encapsulation using closure in JavaScript. JavaScript doesn't support access modifiers; however, the same effect can be achieved using function scopes. All Angular applications are modular in nature. We develop Angular applications by creating many modules. We develop modules to encapsulate functionalities that are independent and have one responsibility. A module exports the classes available in that module. Angular modules are called as NgModules. At least one Angular module will be present in any Angular application: a root module, which will represented as AppModule. AppModule is a class decorated with @NgModule.

The following code snippet shows an AppModule class:

import { NgModule }      from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
@NgModule({ 
  imports:      [ BrowserModule ], 
  providers:    [ Logger ], 
  declarations: [ AppComponent ], 
  exports:      [ AppComponent ], 
  bootstrap:    [ AppComponent ] 
}) 
export class AppModule { } 

In the preceding code, an NgModule imported from @angular/core is decorated to the AppModule class. Note that NgModule has some important properties, such as imports, exports, providers, declarations, and bootstrap.

The metadata declarations should be assigned with view classes such as components, directives, and pipes that belong to this module. The metadata exports will be assigned with the components, directives, or pipes that are usable in the component templates. The metadata imports should be assigned with the exported classes that are used by component templates. The metadata providers will be assigned with the services that are used or accessed in the entire application. It creates the instance of services assigned and adds to the global collection of services so that the services will be ready to be consumed across the Angular application. The metadata bootstrap is assigned with the root component that is responsible to render the main view of the application.

A sample AppComponent class is shown as follows. The export statement exposes the component, and the AppComponent class is accessible to other modules in the application:

export class AppComponent { } 

A class is a template that contains definitions of methods and variables of an object. An object is an instance of the class, so it can hold the real value of the variables, and the methods can perform actions against the actual values. Note that the current version of JavaScript doesn't support classes. It's a class-free language. In JavaScript, everything is an object, and functions are used to mimic classes. ECMAScript 6 introduces syntactic sugar over JavaScript prototype-based inheritance by introducing classes to JavaScript.

Here, we leverage the power of TypeScript as a superset of JavaScript. The export keyword in the statement says that we are exporting or exposing an AppComponent class to other modules of the application.

Let's consider that we have saved this component in a file named app.component.ts. In order to access or reference the AppComponent class that is exposed, we need to import it in the file we will access. The following statement does this:

import {AppComponent} from './app.component';

Here, the import keyword in the statement means that we are importing a class that is exposed: AppComponent. The from keyword represents or refers to the file or module where the importing component exists. For example, it is app.component.ts in our case. A module name is the filename of the component without the extension; so, here the module name is app.component. We start the module's filename with the relative file path (./), and it represents the same folder.

Modules can also have a collection of other modules and such modules are known as library modules. Angular itself has many library modules. Some library modules are core, common, router, and so on. We import Component from the @angular/core library module, which is the primary module that we use for most things:

import {Component} from '@angular/core'; 

All Angular library modules will be mentioned without any relative file path in the from clause.