Angular2RoutingSetupByShubham
•Download as DOCX, PDF•
0 likes•184 views
This document outlines the steps to set up routing in an Angular 2 application: 1. Add a <base> tag to index.html to define the base URL for routing. 2. Configure routes in an app-routing.ts file and import RouterModule.forRoot to bootstrap routing. 3. Import the routing constant into the AppModule and add it to the imports array. 4. Add a <router-outlet> tag to app.component.html to display routed components. 5. Add router links and start the app.
Report
Share
Related slideshows
![Angular 2 Setup for Routing
Note : Before reading this see the setup of angular 2 document first for better
understanding 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);](https://cdn.statically.io/img/image.slidesharecdn.com/964a0448-7519-4dfa-b1ba-ed2618b2afb8-160911193520/85/Angular2RoutingSetupByShubham-1-320.jpg)
![Step 3. We need to export the routing constant we can import into our
app.module.ts
// This is the entry point to your application
import { 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 { }](https://cdn.statically.io/img/www.slideshare.net/data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (12)
Similar to Angular2RoutingSetupByShubham
Similar to Angular2RoutingSetupByShubham (20)
Angular2RoutingSetupByShubham
- 1. Angular 2 Setup for Routing Note : Before reading this see the setup of angular 2 document first for better understanding 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);
- 2. Step 3. We need to export the routing constant we can import into our app.module.ts // This is the entry point to your application import { 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 { }
- 3. 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.html with <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 Verma github: @codershubhamverma