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";
@Component({
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';
@NgModule({
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';
platformBrowserDynamic().bootstrapModule(mainModule);
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'
@Component({
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';
@NgModule({
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>
<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>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<welcome>Loading App...</welcome>
</body>
</html>
Step 7) Run and Fun!!
No comments:
Post a Comment