Angular

Last Updated: 9/7/2023

Configuring Routes

  • In App.module.ts, add import statement at the top
import {RouterModule} from '@angular/router';
  • In the imports array, add
RouterModule.forRoot()
  • We use this to define the root routes for the application
  • As the application grows, we may break the application into smaller more manageable modules
  • In each module we will have set of routes for that particular area of application
  • Instead of forRoot, we will use RouterModule.forChild()
  • Define the route for sub modules

Pass an array of route

  • Inform angular that when browser address changes to the path, display the component
{path: '', component: HomeComponent}
  • No leading slash in path,
  • Empty path represent home page or default route
  • To add parameter we use colon and then the name of the parameter
{path: 'followers/:username', component: ProfileComponent} --passing route 
parameters
{path: 'followers', component: FollowerComponent} --no leading slash
  • If the user navigates to invalid route, we want to display not found page
		{path: '**', component: NotFoundComponent} - for all other routes or invalid routes
  • ** represents Wildcard - catches any url in the browser bar
  • Order of the routes are important
  • Add routes from more specific to generic
RouterModule.forRoot([
	{path: '', component: HomeComponent},
	{path: 'followers/:username', component: ProfileComponent}
	{path: 'followers', component: FollowerComponent}
	{path: '**', component: NotFoundComponent}	
])
Previous
Next