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!!