AngularJS Routing

 

 

AngularJS Navigation Tutorial

 

 

Angular provides a separate module, RouterModule to set up the navigation in the Angular application. Let us learn the how to do the routing in Angular application in this chapter.

It does moves from one view (list of expenses) to another view (expense details).

Let us create a new application  

C:\> ng new routing-app 

Angular CLI generate a new module, AppRoutingModuele for routing purpose. The code looks as follows −

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

const routes: Routes = [];

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

export class AppRoutingModule { }

above code,

Imports RouterModule and Routes from @angular/router package.

RouterModule allows configuring and execute routing in the application.

Routes is the type used to setup the navigation rules.

Routes is the local variable (of type Routes) used to configure the actual navigation rules of the application.

RouterMoudle.forRoot() method will setup the navigation rules configured in the routes variable.

Creating routes in AngularJS

 
Creating a route is simple and easy. The basic information to create a route is given below −

--- Target component to be called.
--- The path to access the target component.
 

Example:

const routes: Routes = [
  { path: 'about', component: AboutComponent },
];

---routes is the const  variable in the AppRoutingModule. This variable is an array and contains the path value and its related component. Ex: In the above routes variable,
---about is the path and AboutComponent is the target component. When the user opens http://localhost:4200/about URL, the path matches with about rule, and then it invokes AboutComponent.

Accessing routes in AngularJS

 
Let us learn how to use the configured routes in the application.

Accessing the route is a two-step process.

Include router-outlet tag in the root component template.

<router-outlet> </router-outlet>

Use routerLink and routerLinkActive property in the required place.

<a routerLink="/about" routerLinkActive="active">About</a>

---- routerLink sets the route.

---- routerLinkActive adds the CSS class, when the route is active.

 Redirect routes in AngularJS

 
 redirectTo -- is the option to set redirection path. Example route is as follows −

const routes: Routes = [

   { path: '', redirectTo: '/about' },
];

Wildcard routes

using ** and will be used to handle non-existing path in the application.

const routes: Routes = [

  { path: 'about', component: AboutComponent },
  { path: '',   redirectTo: '/about', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent },  // Wildcard route for a 404 page 

];

Access Route parameters

In Angular, we can attach extra information in the path using parameter. The parameter can be accessed in the component by using paramMap interface. The syntax to create a new parameter in the route is as follows −

const routes: Routes = [
 
  { path: 'prodict/:id', component: ItemComponent },
 
];

we have attached id in the path. id can be used in the ProductComponent in two ways

Using Observable.
Using snapshot (non-observable option).

id can be accessed in the ItemComponent using two techniques.

Using Observable.

 
paramMap are as follows you can access parameter −

 -- Import paramMap available in @angular/router package.
 -- Use paramMap in the ngOnInit() to access the parameter and set it to a local variable.

ngOnInit() {
    this.route.paramMap.subscribe(params => {
        this.id = params.get('id');
    });
}

 

Using snapshot (non-observable option).

snapshot is similar to Observable only the different is,it does not support observable and get the parameter value immediately.

let id = this.route.snapshot.paramMap.get('id');

 

A simple route example
     

 app-component.ts

import { Component } from '@angular/core';

import { Router, ActivatedRoute } from '@angular/router'; 

import { NavigationExtras } from '@angular/router'; 
	

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'myapp3';



constructor(private router: Router, private route: ActivatedRoute)
{
/*this.router.navigate(['about'], { relativeTo: this.route }); */
} 

}

 

app-component.html

 <a routerLink="home" routerLinkActive="active">Home</a> | 
 <a routerLink="about" routerLinkActive="active">About</a> | 
 
 <a routerLink="contact" routerLinkActive="active">Contact</a> | 
 <a routerLink="#">Test</a> | 

<router-outlet></router-outlet>  

 app-routing.module.ts

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

import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';


//import { PageNotFoundComponent  } from './page-not-found/PageNotFoundComponent.component';

 


const routes: Routes = [

  { path: 'home', component: AppComponent },
  { path: 'contact', component: ContactComponent },
  { path: 'about', component: AboutComponent },
   { path: '',   redirectTo: '/home', pathMatch: 'full' }, 
];
 
 
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Output: