Angular Module Vs JsModule

What is a module?

A module is a reusable piece of code that encapsulates implementation details and exposes a public API so it can be easily loaded and used by other code.

Why do we need modules?

Technically we can write code without modules.

Modules are a pattern that developers have been using in many different forms and programming languages since the 60's and 70's.

In JavaScript, modules should ideally allow us to:

• abstract code: to delegate functionality to specialized libraries so that we don't have to understand the complexity of their actual implementation
• encapsulate code: to hide code inside the module if we don't want the code to be changed
• reuse code: to avoid writing the same code over and over again
• manage dependencies: to easily change dependencies without rewriting our code

ES6 module format

Prior to ES2015 (ES6) there was no module system in the standard of the ECMAScript language. What we had (and still have) instead, are different implementation patterns for “simulating” a module system: there is the simple IIFEs (Immediately Invoked Function Expression), UMD (Universal Module Definition), AMD (Asynchronous Module Definition) and CommonJS

As of ES6, JavaScript also supports a native module format.

It uses an export token to export a module's public API:

// Export the function
export function sayHello(){  
  console.log('Hello');
}
// Do not export the function
function somePrivateFunction(){  
  // ...
}

Angular as a JavaScript framework also uses modules to organize codes but vanilla JavaScript and Angular organize code differently.

JavaScript modules

In JavaScript, modules are individual files with JavaScript code in them. To make what's in them available, you write an export statement, usually after the relevant code, like this:

export class AppComponent { ... }

Then, when you need that file's code in another file, you import it like this:

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

JavaScript modules help us to namespace, preventing accidental global variables.

NgModules

NgModules are classes decorated with @NgModule. The @NgModule decorator’s imports array tells Angular what other NgModules the current module needs. The modules in the imports array are different than JavaScript modules because they are NgModules rather than regular JavaScript modules. Classes with an @NgModule decorator are by convention kept in their own files, but what makes them an NgModule isn’t being in their own file, like JavaScript modules; it’s the presence of @NgModule and its metadata.

The AppModule generated from the Angular CLI demonstrates both kinds of modules in action:

Below is the codepen url for the generated AppModule.

TypeScript Code:

/* These are JavaScript import statements. Angular doesn't know anything about these. */
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

/* The @NgModule decorator lets Angular know that this is an NgModule. */
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [     /* These are NgModule imports. */
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Live Demo:

It is just a code snippet explaining a particular concept and may not have any output

See the Pen ngModulevsJsModule_app.module.ts by w3resource (@w3resource) on CodePen.

The NgModule classes differ from JavaScript module in the following key ways:

• An NgModule bounds declarable classes only. Declarables are the only classes that matter to the Angular compiler.
• Instead of defining all member classes in one giant file as in a JavaScript module, you list the module's classes in the @NgModule.declarations list.
• An NgModule can only export the declarable classes it owns or imports from other modules. It doesn't declare or export any other kind of class.
• Unlike JavaScript modules, an NgModule can extend the entire application with services by adding providers to the @NgModule.providers list.

Previous: NgModules
Next: Frequently used Modules