angular2routingsetupbyshubham

Angular 2 Setup for Routing

Note : Before reading this see the setup of angular 2 document first for better un-derstanding follow the below link.“ http://www.slideshare.net/goldsmithverma/anugula2setupbyshubham-65904844 “

Step 1. Add a <base> element to the index.html as the first child in the <head> tag to tell the router how to compose navigation URLs.

<base href= “ / “>

Step 2. Every application has a router. When we hit the new url, router looks for in Route config and display the content of component for which route is mapped. We need to configure the router, we bootstrap our app with an array of routes that is provided by RouteModule.forRoot function.

create a routing file in your app directory app/app.routing.ts

and write the code

import { Routes, RouterModule } from '@angular/router';import { ModuleWithProviders } from '@angular/core';

import { AboutComponent } from './about/about.component';import { HomeComponent } from './home/home.component';const appRoutes: Routes = [ { path: 'home', component: HomeComponent }, { path: 'about', component: AboutComponent, data: { title: 'About angular 2' } }];

export const appRoutingProviders: any[] = [

];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

http://www.slideshare.net/goldsmithverma/anugula2setupbyshubham-65904844

http://www.slideshare.net/goldsmithverma/anugula2setupbyshubham-65904844

Step 3. We need to export the routing constant we can import into our app.mod-ule.ts

// This is the entry point to your applicationimport { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { APP_BASE_HREF } from '@angular/common';import { RouterModule } from '@angular/router';import { HttpModule } from '@angular/http';import { FormsModule } from '@angular/forms'

import { AppComponent } from './app.component';

import { routing, appRoutingProviders } from './app.routing';

import { AboutComponent } from './about/about.component';import { HomeComponent } from './home/home.component';

@NgModule({ imports: [ BrowserModule, FormsModule, routing ], declarations: [ AppComponent, AboutComponent, HomeComponent ], providers: [ appRoutingProviders ], bootstrap: [ AppComponent ]})export class AppModule { }

Step 4. Configure the router outlet where the contents are fetched. —> Routes views goes here<router-outlet></router-outlet>

now change the contents of you app/app.component.htmlwith<div> <h1>Welcome to the world of angular 2</h1> <nav> <a [routerLink]="['/home']"> Home </a> | <a [routerLink]="['/about']">About</a> </nav> <router-outlet></router-outlet></div>

Step 5. Everything is done run the app $ npm start

Shubham Vermagithub: @codershubhamverma

angular2routingsetupbyshubham

Documents