angular 2 route config example

Angular 2 Routing Concepts and Examples

This post helps us to learn application “Routings” in Angular 2. In the below routing example I am using Angular 2 for the client side and ASP.NET Core with single page application (SPA) for the server application.

“The Router is use to map applications URLs to application components. There are three main components that you are using to configure routing.”

1.           Routes: - It uses to describe our application's Routes.
2.           Router Imports: - It uses to import our application's Routes.
3.           RouterOutlet: - It is a placeholder component and use to get expanded to each route's content.
4.           RouterLink: - It is use to link to application's routes.

Routes: - The Routes is uses to describe our application's Routes. The “RouterModule.forRoot” method in the module imports to configure the router.

Five concepts that need Routes Representation
1.           Path (a part of the URL)
2.           Route Parameters
3.           Query/Matrix Parameters
4.           Name outlets
5.           A tree of route segments targeting outlets

Syntax:-
RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home/:id', component: HomeComponent }, //HERE ID IS A ROUTE PARAMETER.
            { path: 'login', component: LoginComponent },
            { path: 'registration', component: RegistrationComponent },
            { path: '**', redirectTo: 'home' }
        ])

Example,
@NgModule({
    bootstrap: [ AppComponent ],
    declarations: [
        AppComponent,
        HomeComponent,
        HeaderComponent,
        MenuComponent,
        LoginComponent,
        RegistrationComponent
    ],
    imports: [
        UniversalModule, // MUST BE FIRST IMPORT. THIS AUTOMATICALLY IMPORTS BROWSERMODULE, HTTPMODULE, AND JSONPMODULE TOO.
        RouterModule.forRoot([ //RouterModule.forRoot method in the module imports to configure the router.
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home/:id', component: HomeComponent }, //HERE ID IS A ROUTE PARAMETER.
            { path: 'login', component: LoginComponent },
            { path: 'registration', component: RegistrationComponent },
            { path: '**', redirectTo: 'home' }
        ]),
        FormsModule,
        ReactiveFormsModule
    ]
})


Router Imports - The Angular Router is an optional service that presents a particular component view for a given URL i.e.

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

Example,
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UniversalModule } from 'angular2-universal';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './components/app/app.component';
import { HomeComponent } from './components/home/home.component';
import { HeaderComponent } from './components/shared/header/header.component';
import { MenuComponent } from './components/menu/menu.component';
import { LoginComponent } from './components/login/login.component';
import { RegistrationComponent } from './components/registration/registration.component'


@NgModule({
    bootstrap: [ AppComponent ],
    declarations: [
        AppComponent,
        HomeComponent,
        HeaderComponent,
        MenuComponent,
        LoginComponent,
        RegistrationComponent
    ],
    imports: [
        UniversalModule, // MUST BE FIRST IMPORT. THIS AUTOMATICALLY IMPORTS BROWSERMODULE, HTTPMODULE, AND JSONPMODULE TOO.
        RouterModule.forRoot([ //RouterModule.forRoot method in the module imports to configure the router.
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home/:id', component: HomeComponent }, //HERE ID IS A ROUTE PARAMETER.
            { path: 'login', component: LoginComponent },
            { path: 'registration', component: RegistrationComponent },
            { path: '**', redirectTo: 'home' }
        ]),
        FormsModule,
        ReactiveFormsModule
    ]
})


Router-outlet directive: - Router-outlet directive is used to render the components for specific location of your applications. Both the template and templateUrl render the components where you use this directive.

Syntax :- <router-outlet></router-outlet>

Example
<div class='container'>   
    <div class='row'>
        <router-outlet></router-outlet>
    </div>
</div>

The Route Params: - The route parameter is used to map given URL's parameters based on the rout URLs and it is an optional parameters for that route.

Syntax: -   params: {[key: string]: string}

Example
@NgModule({
    bootstrap: [ AppComponent ],
    declarations: [
        AppComponent,
        HomeComponent,
        HeaderComponent,
        MenuComponent,
        LoginComponent,
        RegistrationComponent
    ],
    imports: [
        UniversalModule, // MUST BE FIRST IMPORT. THIS AUTOMATICALLY IMPORTS BROWSERMODULE, HTTPMODULE, AND JSONPMODULE TOO.
        RouterModule.forRoot([ //ROUTERMODULE.FORROOT METHOD IN THE MODULE IMPORTS TO CONFIGURE THE ROUTER.
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home/:id', component: HomeComponent }, //HERE ID IS A ROUTE PARAMETER.
            { path: 'login', component: LoginComponent },
            { path: 'registration', component: RegistrationComponent },
            { path: '**', redirectTo: 'home' }
        ]),
        FormsModule,
        ReactiveFormsModule
    ]
})

Router-link directive: - Router-link directive is used to link a specific part of your applications.

Syntax :- <router-link></router-link>

Example,
<ul class='nav navbar-nav'>
    <li [routerLinkActive]="['link-active']">
        <a [routerLink]="['/login']">
            <span class='glyphicon glyphicon-Login'></span> Login
        </a>
    </li>
    <li [routerLinkActive]="['link-active']">
        <a [routerLink]="['/registration']">
            <span class='glyphicon glyphicon-Register'></span> Register
        </a>
    </li>
    <li [routerLinkActive]="['link-active']">
        <a [routerLink]="['/Billing']">
            <span class='glyphicon glyphicon-Billing'></span> Billing
        </a>
    </li>
</ul>   

References-


I hope you are enjoying with this post! Please share with you friends. Thank you!!
ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

Angular 2 Routing Concepts and Examples Angular 2 Routing Concepts and Examples Reviewed by Anil Singh on 10:30 PM Rating: (5)
www.code-sample.com/. Powered by Blogger.
^