1. What is angular module?
NgModule helps to organize an application into organized blocks of functionality. @NgModule decorator takes metadata that tells angular how to compile and run the module code. A typical NgModule looks like.
Each application in angular 2 must have at least one NgModule that you need to bootstrap to launch your application.
Components of NgModule:
Declarations Array: this includes application’s components only.
Imports Array: this includes modules.
Providers Array: this includes services.
Bootstrap Array: include components to bootstrap, generally one component used but you can provide multiple components as well if required.
2. Explain Routing in angular 2?
Router package is used for angular 2 routing. And this router comes with many features for routing based on paths and loading specific components.
To define route we can create routes constants in your modules like
const routes=[
{Path:'',component: HomeComponent},
{Path:'Contacts',component:ContactsComponent}
];
Then you have to import these routes in NgModule.
@NgModule({
declarations: [
AppComponent,
HomeComponent,
ContactsComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule, RouterModule.forRoot(routes)
],
providers: [],
bootstrap: [AppComponent]
})
Also you have to use router-outlet inside your component.
@Component({
selector: 'app-root',
template: '<nav>
<a routerLink=””>Home</a>
<a routerLink=”contact”></a>
</nav>
<router-outlet></router-outlet>'
})
But this approach can be optimized by putting out routes in separate file.
We can create separate app.route.ts file to define our route.
import { HomeComponent } from './app.component';
import { ContactsComponent } from './app.component';
import { RouterModule } from '@angular/router';
const routes=[
{Path:'',component: HomeComponent},
{Path:'Contacts',component:ContactsComponent}
];
export default RouterModule.forRoot(routes);
And then we does not need to import RouterModule.forRoot(routes)inside our module but we simply import this app.rotes that we have created.
import appRoutes from './app.route';
@NgModule({
declarations: [
AppComponent,
ContactsComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
appRoutes
],
providers: [],
bootstrap: [AppComponent]
})
You can have separate route for each component as below. This is called lazy loading of modules using angular 2 router.
a. Create a separate home.route.ts
import { HomeComponent } from "app/home/home.component";
import { RouterModule } from "@angular/router";
const routes = [
{ path: '', component:HomeComponent}
];
export default RouterModule.forRoot(routes);
b. Configure route into module.
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { HomeComponent } from "app/home/home.component";
import { RouterModule } from "@angular/router";
import homeRoutes from 'app/home/home.routes';
@NgModule({
imports :[CommonModule, homeRoutes],
providers:[],
declarations:[HomeComponent]
})
export default class HomeModule{
}
c. Configure individual routes to app.route.ts that we have created earlier. See the difference on above app.route.ts and this.
import { HomeComponent } from './app.component';
import { ContactsComponent } from './app.component';
import { RouterModule } from '@angular/router';
import {CommonModule} from '@angular/common'
const routes=[
{Path:'',loadChildren: 'app/home/home.module'},
{Path:'Contacts',loadChildren:'app/contact/contact.module'}
];
export default RouterModule.forRoot(routes);
