Angular 2 Modules vs. JavaScript Modules vs. Angular 1 Modules

Angular 2 Modules -

The Angular module — a class decorated with @NgModule — is a fundamental feature of Angular.

JavaScript also has its own module system for managing collections of JavaScript objects. It's completely different and unrelated to the Angular module system.

Angular Modules are the unit of reusability.

Angular modules represent a core concept and play a fundamental role in structuring Angular applications.

Every Angular app has at least one module, the root module, conventionally named AppModule.

Important features such as lazy loading are done at the Angular Module level.

Angular Modules logically group different Angular artifacts such as components, pipes, directives, and so on.

Angular Modules help to organize an application into cohesive blocks of functionalities and extend it with capabilities from external libraries.

App module looks like below,

import { NgModule } from '@angular/core';
import { RouterModule, Routes  } from '@angular/router';
import { HttpModule } from '@angular/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './components/app/app.component'
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { UserComponent } from './components/user/user.component';
import { UserService } from './components/service/user.service';
import { BarCodePipe } from './components/pipe/custom.pipe';


export const sharedConfig: NgModule = {
    bootstrap: [ AppComponent ],
    declarations: [
        AppComponent,
        NavMenuComponent,
        HomeComponent,
        UserComponent,
        BarCodePipe
    ],
    imports: [
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'user', component: UserComponent },
            { path: '**', redirectTo: 'home' }
        ])
    ],
    providers: [UserService]
};

Angular 1 Module -

1.     Services

2.     Directives

3.     Controllers

4.     Filters

5.     Configuration information

6.     And so on…

JavaScript Modules -

In JavaScript Modules, every file is one module. In Angular 2, one component is normally a file.

JavaScript also has its own module system for managing collections of JavaScript objects. It's completely different and unrelated to the Angular module system.

Avoid leaking code to the global namespace and thus to avoid naming collisions.

Encapsulate code to hide implementation details and control what gets exposed to the outside.

Structure our applications and we can’t use a single file.

Manage dependencies and code reuse.

Stayed Informed – Learn Angular 2 with TypeScript

I hope you are enjoying with this post! Please share with you friends. Thank you!!