Scribd
Upload
7 views

Steps to Define Routing in Angular

This document provides a step-by-step guide to define routing in an Angular application. It includes instructions for creating an Angular app, generating components, setting up a routing module, updating the main application file, and modifying the AppComponent to include a router outlet. Finally, it instructs users to run the app and navigate to different routes.

Uploaded by

ar9642253
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
7 views

Steps to Define Routing in Angular

This document provides a step-by-step guide to define routing in an Angular application. It includes instructions for creating an Angular app, generating components, setting up a routing module, updating the main application file, and modifying the AppComponent to include a router outlet. Finally, it instructs users to run the app and navigate to different routes.

Uploaded by

ar9642253
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

✅ Steps to Define Routing in Angular

1. Create an Angular App (if not already created)


ng new my-routing-app
cd my-routing-app

2. Generate Components

You need some components to route to:

ng generate component home


ng generate component about
ng generate component contact

✅ Step-by-Step Routing Setup


3. Create the Routing Module (if not created by CLI)

Usually the Angular CLI sets it up. If not, create app-routing.module.ts in the src/app
folder.

typescript

// src/app/app.routes.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home/home.component';


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

const routes: Routes = [


{ path: '', component: HomeComponent }, // default route
{ path: 'about', component: AboutComponent },
{ path: 'contact', component: ContactComponent },
{ path: '**', redirectTo: '' } // wildcard for 404
];

3. Update main.ts to Use Routing


ts

// src/main.ts

import { bootstrapApplication } from '@angular/platform-browser';


import { provideRouter } from '@angular/router';
import { routes } from './app/app.routes';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
providers: [
provideRouter(routes)
]
});

4. Update AppComponent to Include <router-outlet>

Make sure AppComponent is standalone and imports RouterModule.

ts
// src/app/app.component.ts

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


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

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

@Component({
selector: 'app-root',
standalone: true,
imports: [RouterModule,RouterOutlet],
template: `
<h1>Standalone Angular Routing</h1>
<nav>
<a routerLink="">Home</a> |
<a routerLink="/about">About</a> |
<a routerLink="/contact">Contact</a>
</nav>
<hr />
<router-outlet></router-outlet>
`
})
export class AppComponent { }

✅ Now You're All Set!

Run your app:

ng serve

You can navigate to:

 / → Home
 /about → About
 /contact → Contact

You might also like