Monday, November 28, 2016

Main and Feature module in Angular2

We can assume Module as root node in angular2 application. A module may contains components (one or more), pipes, services which is logically related to some module. For example, if we create login module then probably login component, sign in component, logout component will be child of login module. So we can say that those component will hook up with login module. Again, those component may use login service, logout service etc. which again logically related to login functionality and can be inject to login module.

 Point to be noted that each angular2 application should have at least one module which will load in bootstrap to startup the application. We can call the module as main module.
The application may contains many sub module to support business functionality and those module could be call as feature module.

The feature module will attach to main module so that it will be accessible in application. To make available one module to other module we have to export it. The consumer module have to import same to consume it.

In this small example we will learn to attach one feature module to main module. I am assuming that you have Angular2 setup in your editor. If not please follow my previous article for step to step guide of angular setup.

Now, follow the steps to implement same.

The entire folder structure will be like this.

Step1) Create main component.

Create “app.main_component.ts” file under app folder of application.

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

    selector: 'welcome',
    template: `<p>{{message}}</p> <login></login>`
export class welcomeComponent {
    private message: string;
    constructor() {
        this.message = "Welcome to app."

Just notice that we have used “<login></login>” element in template section which is defined in our feature module which we will implement in steps.

Step2) Create main module.

Add main.ts under app folder in application and here is implementation.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { welcomeComponent } from './app.main_component';
import {loginModule} from './app.login_module';

    imports: [BrowserModule , loginModule],
    declarations: [welcomeComponent],
    bootstrap: [welcomeComponent]
export class mainModule


Just notice that we have imported our feature module called “loginModule” in imports section of main module. The loginModule we will define in short.

Step 3) Setup main module for bootstrap.

Here is code to setup mainModule in bootstrap method. So mainModule will trigger when application will load first time. The file name is “main.ts”

import {platformBrowserDynamic}    from '@angular/platform-browser-dynamic';
import {mainModule} from './app.main_module';

Step 4) now we will concentrate in feature module

Add “app.login_component” file under app folder.  The loginComponent contains very simple template, We can implement real time login template and handle event in real application.
import {Component} from '@angular/core'

    selector: 'login',
    template: '<p> Welcome to login section..</p>'
export class loginComponent {


Step 5 ) Add login module

Add “app.login_module.ts” file under app folder. The login module is linked with loginComponent. In need we can attach more login/logout related component with this module  

import { NgModule } from '@angular/core';
import {loginComponent } from './app.login_component';
import { CommonModule } from '@angular/common';

    imports: [CommonModule],
    declarations: [loginComponent],
    exports: [loginComponent]
export class loginModule {


Step 6) The last step is to create “index.html” page. And set it as startup page.

<!DOCTYPE html>

<head lang="en">
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <!-- Configure SystemJS -->
    <script src="systemjs.config.js"></script>
      System.import('app').catch(function(err){ console.error(err); });

    <welcome>Loading App...</welcome>


Step 7) Run and Fun!!

No comments:

Post a Comment