Angular / Basics / Route & Components
Route
-
Code
1. Configure Routes:
Navigate to your project directory and open src/app/app-routing.module.ts. This file is where you define the routes for your application.
import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; // Import components to be associated with routes import { HomeComponent } from './home/home.component'; import { AboutComponent } from './about/about.component'; import { ContactComponent } from './contact/contact.component'; const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'about', component: AboutComponent }, { path: 'contact', component: ContactComponent }, // Add more routes as needed ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } 2. Create Components:
ng generate component home ng generate component about ng generate component contact This will create home.component, about.component, and contact.component along with their necessary files.
3. Add Router Outlet in App Component:
My App