Pages

Tuesday, 30 May 2017

Angular 2 FAQs

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);   

No comments:

Post a Comment

Please leave a comment for this post