Add routing

apps/angular-intro/src/app/app.component.html

@@ -4,4 +4,6 @@
   <app-counter-with-service />
   <app-counter-with-service />
   <app-counter-with-ngrx />
+  <hr />
+  <router-outlet />
 </div>

apps/angular-intro/src/app/app.component.ts

@@ -2,12 +2,14 @@ import { Component } from '@angular/core';
 import { CounterComponent } from '../components/counter/counter.component';
 import { CounterWithServiceComponent } from '../components/counter-with-service/counter-with-service.component';
 import { CounterWithNgRxComponent } from '../components/counter-with-ngrx/counter-with-ngrx.component';
+import { RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
   imports: [
+    RouterOutlet,
     CounterComponent,
     CounterWithServiceComponent,
     CounterWithNgRxComponent,

apps/angular-intro/src/app/app.routes.ts

@@ -1,3 +1,24 @@
 import { Route } from '@angular/router';
+import { Page1Component } from '../pages/page-1/page-1.component';
+import { PageNComponent } from '../pages/page-n/page-n.component';
 
-export const appRoutes: Route[] = [];
+export const appRoutes: Route[] = [
+  {
+    path: '',
+    redirectTo: 'page-1',
+    pathMatch: 'full',
+  },
+  {
+    path: 'page-1',
+    component: Page1Component,
+  },
+  {
+    path: 'page-n',
+    redirectTo: 'page-n/1',
+    pathMatch: 'full',
+  },
+  {
+    path: 'page-n/:pageNumber',
+    component: PageNComponent,
+  },
+];

apps/angular-intro/src/pages/page-1/page-1.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  standalone: true,
+  selector: 'app-page-1',
+  template: `<h1>Page 1</h1>`,
+})
+export class Page1Component {}

apps/angular-intro/src/pages/page-n/page-n.component.ts

@@ -0,0 +1,23 @@
+import { Component, DestroyRef, inject, OnInit } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  standalone: true,
+  selector: 'app-page-n',
+  template: `<h1>Page: {{ pageNumber }}</h1>`,
+})
+export class PageNComponent implements OnInit {
+  private readonly route = inject(ActivatedRoute);
+  private readonly destroyRef = inject(DestroyRef);
+
+  pageNumber?: number;
+
+  ngOnInit(): void {
+    this.route.params
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((params) => {
+        this.pageNumber = +params['pageNumber'];
+      });
+  }
+}