Simple Custom Module in Angular 2

Module
Angular Module is used to group components, services, directives and pipes etc which are related to common functionality.
For example if we are creating app for school maintenance, which has sub categories like student maintenance, teachers maintenance, office staff maintenance etc
To each one we can create separate module which has its own components, services, directives etc to separate its own concerns, for structured, maintainability and ease in plug and play.
Prerequisites
Angular Cli must be installed if not installed check out my previous article “Install and run Angular 2 apps using Angular CLI”.
Some basic knowledge on Html, Css, Javascript, Oops.
Create a new Module
Today we are going to create a module for students.
Using Command
ng generate module students
Create Manually
Create students folder inside app folder and create module file inside students folder students.module.ts with below code. Also create components and add to this module, Please check article “Simple Component in Angular 2” to create and add components inside module.
similarly services can be included and added inside the providers, another module can be included and added inside the imports.
since we created students module manually, it needs to be added in our root module file(AppModule) to expose this module to outside world connected with app module.
app.module.ts
Analyzing students.module.ts
import { NgModule } from ‘@angular/core’;
import { StudentsSummaryComponent } from ‘./students/studentssummary.ts’;
import { StudentsRegisterComponent } from ‘./students/studentsregister.ts’;
Imported the NgModule decorator from Angular core module. and also the components which we are going to map in this module.
@NgModule()
NgModule decorator tells the angular that file is module related. Parameter inside NgModule decorators.
@NgModule({
imports: [ BrowserModule ],
providers: [ ],
declarations: [ StudentsSummaryComponent, StudentsRegisterComponent ],
exports: [ StudentsSummaryComponent, StudentsRegisterComponent ],
bootstrap: [ StudentsSummaryComponent ]
})
Imports: to import another supporting modules to this module.
Providers: make services to provide it for all components to use.
declarations: to declare components, directives and pipes which can be accessed with in this module.
exports: to declare components which can be exposed to other modules where this this module is imported.
bootstrap: define the root component of our module
export class StudentsModule { }
Final step: export the StudentsModule class to import and access it from other modules.
Thanks you!!! Happy Coding

