How To Create Routing and Navigation In Angular2
Posted By : Swati Rahangdale | 26-Feb-2018
The Angular Router enables navigation from one view to the next application tasks.
These are following steps to configure routing in angular 2 application.
1. Base Href tag:
The <base href="/"> tag tells the Angular router what is the static part of the URL. The router modifies the remaining part of the URL.
<head>
<base href="/">
</head>
2. Create a Routing Configuration:
First Create a Routes file
For example:src/app/app-routing.module.ts
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; @NgModule({ imports: [ CommonModule ], declarations: [] }) export class AppRoutingModule { }
3. Import specified configuration from the angular library for Basic routing configuration:
Syntax:
import { RouterModule, Routes } from '@angular/router';
4. Then Create an array of Routes:
These are two properties in angular 2
-
Path
-
Component
Example: const appRoutes: Routes = [
Example: const appRoutes: Routes = [ { path: 'home', component: HomeComponent },//here url mapped to Home component. { path: 'profile/:id', component: ProfileComponent },//here url mapped to profile component. { path: 'heroes', component: ProfileComponent, data: { title: 'Profilet' } }, { path: '', redirectTo: '/home', pathMatch: 'full' }, { path: '**', component: PageNotFoundComponent } ]; @NgModule({ imports: [ RouterModule.forRoot( appRoutes, { enableTracing: true } ) // other imports here ], }) export class AppModule { }
5.RouterModule.forRoot():
Add RouterModule to the @NgModule.imports array and configure it with the routes in one step by calling RouterModule.forRoot() within the imports array, like this:
The method is called forRoot() because you configure the router at the application's root level.
Syntax: imports: [ RouterModule.forRoot(routes) ]
for Example:
@NgModule({ declarations: [ RoutesDemoApp, HomeComponent, ProfileComponentComponent, DashboardComponent ], imports: [ BrowserModule, RouterModule.forRoot(routes) // <-- installs Router routes, components and services ], bootstrap: [ RoutesDemoApp ], providers: [ provide(LocationStrategy, {useClass: HashLocationStrategy}) ] }) class RoutesDemoAppModule {} // bootstrap our app platformBrowserDynamic().bootstrapModule(RoutesDemoAppModule) .catch((err: any) => console.error(err));
6. RouterOutlet:
- The RouterOutlet directive informs our router where to render the content in the other page view.
- The RouterOutlet is one of the router directives that became available to the AppComponent because AppModule imports AppRoutingModule which exported router module.
For example:
<h1>{{heading}}</h1> <router-outlet></router-outlet> <app-messages></app-messages> @View({ template: <div> router template here <router-outlet></router-outlet> </div> })
7. RouterLink:
RouterLink used the directive in anchor elements.
For example:
@View({ template: <div> <nav> <a>Navigation:</a> <ul> <li><a [router-link]="['home']">Home</a></li> <li><a [router-link]="['profile']">Profile</a></li> <li><a [router-link]="['dashboard']">Dashboard</a></li> </ul> </nav> <router-outlet></router-outlet> </div> })
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Swati Rahangdale
Swati has good konwledge of HTML,CSS, Boostrap.now . She is a UI developer. Her hobbies are watching movie.