Friday, 22 September 2017

Routing - Angular2

What are the main routing Component?
Angular2 provides 3 different components for routing configuration:

Routes is the configuration to describe application’s different routes
RouterOutlet is a “placeholder” component that holds the view for each route
RouterLink is a directive to link to routes

Routes:
Routes is an object to describe the routes of the application.

const routes: Routes  = [
 { path: '', redirectTo: 'login', pathMatch:'full' },
 { path: 'login', component: LoginComponent },
 { path: 'home', component: HomeComponent ,
  children: [
   { path: '', component: DashBoardComponent },
   {path: 'events', component: EventsComponent}
  ]},
 { path: 'register', component: RegisterComponent },
 { path: 'about', component: AboutComponent },
 { path: '**', component: p404Component },
];

We have configure routes which is an array of Route. Each entry of the array is The complete list of possible fields used in this configuration are as following:
  • path – url of the route used by the matcher DSL.
  • component –name of the target component.
  • pathMatch – specifies the matching strategy, example : full.
  • redirectTo -url that will replace the current matched segment in case of redirection.
  • outlet – name of the outlet used as a placeholder for the component. If there is no outlet it would be placed in <router-outlet>
  • canActivate – array of DI tokens used to find CanActivate handlers.
  • canActivateChild – array of DI tokens used to find CanActivateChild handlers.
  • canDeactivate – array of DI tokens used to find CanDeactivate handlers.
  • children-  is an array used to define nested routes.
Router Directives
Angular RouterModule has 3 different directives. Such as:
router-outlet
router-link
routerLinkActive

router-outlet:
router-outlet is a component from angular/router library. The router is the placeholder to display views inside  <router-outlet> tags. As the routes changes, the view inside the <router-outlet> tags also change accordingly.
1
2
3
<div class="container">
<router-outlet></router-outlet>
</div>

router-link:
router-link directive is an alternative of HTML href property. The syntax is as following:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<div class="navbar navbar-default">
<a class="navbar-brand" [routerLink]="['/']">Angular App</a>
<ul class="nav navbar-nav">
<li routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">
<a [routerLink]="['/']">Data Binding</a>
</li>
<li routerLinkActive="active">
<a [routerLink]="['/about','2']">About Us</a>
</li>
<li routerLinkActive="active">
<a [routerLink]="['/inheritance']">Inheritance</a>
</li>
</ul>
</div>

If we want to pass the queryParams in an object , we can also do that as following:
1
<a [routerLink]="['/about', {id:'2'}]">About Us</a>
OR
1
<a [routerLink]="['/about','2']">About Us</a>
routerLinkActive:
The RouterLinkActive directive toggles css classes for active RouterLinks based on the current RouterState. This cascades down through each level in our route tree, so parent and child router links can be active at the same time. To override this behavior, we can bind to the [routerLinkActiveOptions] input binding with the { exact: true } expression. By using { exact: true }, a given RouterLink will only be active if its URL is an exact match to the current URL.

1
2
3
<li routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">
<a [routerLink]="['/']">Data Binding</a>
</li>

How to  handle Routing in Angular2?
There are following steps to complete achieve this Goal, such as
  1. Create App Router Module
    a. Configuration different Paths
  2. Import RouterModule to AppModule
  3. Create Router-Outlet view and associated component
  4. setup router-link directive

Defining Routes
Let’s create a file called app.routes.ts in the root of the app folder. This file will describe the configuration for routers for the application. 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';


import { DatabindingComponent } from './databinding/databinding.component';
import { AboutComponent } from './about/about.component';
import { NotfoundComponent } from './notfound/notfound.component';
import { ChildComponent } from './inheritance/child.component';


const routes: Routes = [
{ path: '', component: DatabindingComponent },
{ path: 'about/:id', component: AboutComponent },
{ path: 'inheritance', component: ChildComponent },
{ path: '**', redirectTo: 'notfound', pathMatch:'full' }
];


@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule { }

Then the last route we will add is a wildcard route. This will match any routes that we have defined. This is also why we added the redirect. If we didn’t, our app would start at this route since we start from a route that is not defined, an empty route.
After adding the redirect, any route that we type that doesn’t exist will get our error page.
Here the routes has been passed as the argument to RouterModule.forRoot() so that the RouterModule in our imports is able to use the RouterOutlet and RouterLink components in this module. Create Router-Outlet view and associated component
For this example, we have placed a placeholder on app.component.html as following:

1
2
3
<div class="container">
<router-outlet></router-outlet>
</div>

The Main AppComponent

1
2
3
4
5
6
7
8
9
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
}

Setup router-link directive

Now we have to write the router-link to place the actual link on html. Therefore, we change the app.component.html and add the router link as following:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<div class="navbar navbar-default">
<a class="navbar-brand" [routerLink]="['/']">Angular App</a>
<ul class="nav navbar-nav">
<li routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">
<a [routerLink]="['/']">Data Binding</a>
</li>
<li routerLinkActive="active">
<a [routerLink]="['/about','2']">About Us</a>
</li>
<li routerLinkActive="active">
<a [routerLink]="['/inheritance']">Inheritance</a>
</li>
</ul>
</div>
<div class="container">
<router-outlet></router-outlet>
</div>

0 comments:

Post a Comment

Topics

ADO .Net (2) Ajax (1) Angular Js (17) Angular2 (24) ASP .Net (14) Azure (1) Breeze.js (1) C# (49) CloudComputing (1) CMS (1) CSS (2) Design_Pattern (3) DI (3) Dotnet (21) Entity Framework (3) ExpressJS (4) Html (3) IIS (1) Javascript (6) Jquery (9) Lamda (3) Linq (11) Mongodb (1) MVC (48) NodeJS (7) RDLC (1) Report (1) Sql Server (29) SSIS (3) SSRS (2) UI (1) WCF (12) Web Api (10) Web Service (1) XMl (1)