Implementation Of Routing In Angular
What is Angular?
It is an open-source, javascript framework written in typescript. The purpose of using angular is to develop single page Applications(SPA). It enables users to create large applications in a maintainable manner.
What is Angular Router?
Angular Router is a module in the Angular framework that provides a powerful navigation and routing system for building single-page applications. They can navigate between these routes by clicking links or using programmatic navigation methods.
app.module.ts:
Make sure to import AppRoutingModule as below in app module.
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [ AppComponent ],
imports: [ BrowserModule, AppRoutingModule ],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app-routing.module.ts:
Make sure to import all components.
import { AboutComponent } from './about/about.component';
import { HomeComponent } from './home/home.component';
import {NotFoundComponent} from './notFound/notFound.component';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{path:'', redirectTo:'home', pathMatch:'full'},
{path:'home', component:HomeComponent},
{path:'about', component:AboutComponent},
{path:'contact', component:ContactComponent},
{path:'**', component:NotFoundComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Here we are defining an array of routes for our application. Each route is an object with two properties: path, which is the URL path for the route, and component, which is the component that should be displayed when the route is navigated to.
It also defines an AppRoutingModule module that sets up the routing configuration and can be used throughout the application.
Wildcard routing is used to handle routes that don't match any of the defined routes in the Routes array. To set up wildcard routing in Angular, you can add a route with a path of **.
To load the routes dynamically use 'router-outlet'
It acts as a placeholder for the router to dynamically insert the component view into the parent component's template based on the current route.
Navigate Using routerLink:
<div><a routerLink="/about">About</a></div>
<div><a routerLink="/contact">Contact</a></div>
If you want to do routing programmatically
import { Router } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
constructor(private router: Router) {}
ngOnInit() {
this.router.navigate(['/about']);
}
}
The "constructor" method takes a private "router" parameter of type "Router", which is injected by the Angular dependency injection system.
The "ngOnInit" method is called by Angular when the component is initialized. In this case, it calls the "navigate" method of the "router" instance to navigate to the "/about" route.
Add child routes:
{ path: 'parent', component: ParentComponent, children: [
{ path: 'child1', component: Child1Component },
{ path: 'child2', component: Child2Component },
]},
];
Add links to the child routes in the parent component's template, using the routerLink directive.
<a routerLink="/parent/child2">Child 2</a>
Adding Route with a parameter
{ path: 'product/:id', component: ProductComponent },
];
we define a route with a :id parameter, which can be any string value. When a user navigates to the product route with an id parameter, the ProductComponent will be displayed.
Fetch the route parameter in the component
productId: string;
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.route.params.subscribe(params => {
this.productId = params['id']; });
}
}
Fetch the query parameters in the component
query: string;
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.route.queryParams.subscribe(params => {
this.query = params['q']; });
}
}
Conclusion:
In conclusion, routing in Angular is a powerful feature that allows us to create single-page applications with multiple views and URLs.