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


Angularjs

This will contain article about angular 2

SatheeshKumar Manoharan

Written by

Entrepreneur, Web miner, Traveller, Passionate driver, Mac addict, Share trader

Angularjs

Angularjs

This will contain article about angular 2

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade