Angular Routing example
Angular provides a powerful routing mechanism that allows you to create single-page applications with multiple views or pages. Here's an overview of how Angular routing works
Setting Up Routes:
In your Angular application, you define routes in the "app-routing.module.ts"
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { NgForExampleComponent } from './ng-for-example/ng-for-example.component';
import { HomeComponent } from './home/home.component';
const routes: Routes = [
{ path: '', component: HomeComponent},
{ path: 'directive', component: NgForExampleComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {
}
Router Outlet:
In your main template (usually app.component.html), you need to include a "<router-outlet></router-outlet>" element. This is where the content of the current route will be rendered.
<div>
<router-outlet></router-outlet>
</div>
Navigating Between Routes:
You can navigate between routes using the "Router" service and the "routerLink" directive.
home.component.html
<div>
<a routerLink="/directive">directive</a>
</div>